Question

我的网站上列有社交图标。当你点击一个，我想要一个窗口弹出更多信息。这是用户点击图标后我想要的样子的图片。

enter image description here

整个弹出窗口都是自包含在它自己的div中。

我正在寻找一种更动态的方法，然后只需在每个按钮的不同坐标中进行硬编码。

提前致谢。

Html

<div id='inset'>
    <div id='icon-gutter'>
        <div id='gutter-loader'>


        </div>
        <div id='icons'>
        <img src='images/facebook.png' id='facebook' />
        <img src='images/twitter.png' id='twitter' />
        <img src='images/google+.png' id='google+' />
        <img src='images/linkedin.png' id='linkedin' />
        <img src='images/reddit.png' id='reddit' />
        <img src='images/tumblr.png' id='tumblr' />
        <img src='images/pinterest.png' id='pinterest' />
        <img src='images/youtube.png' id='youtube' />
        <img src='images/lastfm.png' id='lastfm' />
        <img src='images/instagram.png' id='instagram' />
        <div id='pop-over-wrap'>
            <div id='arrow'>
            </div>
        <div id='pop-over-body'>
            Hello
        </div>
        </div>
        </div>

    </div>
</div>

CSS

#inset {
margin: 0;
padding: 0;
background: url(grey-fabric.png) repeat; /*#001121;*/
height: auto;
max-width: 100%;
position: relative;
padding: 14px 10px 10px 22px;

border-radius: 5px 5px 0px 0px; 
-moz-border-radius: 5px 5px 0px 0px; 
-webkit-border-radius: 5px 5px 0px 0px;

}
#icon-gutter {

    height: auto;
    min-height: 43px;
    position: relative;
    text-align: center;
}

#icons {
    opacity:0;
}
#icons img {

    height: 95px;
    position: relative;
    margin: 0 8px;
    cursor: pointer;

    transition: all .2s;
-moz-transition: all .2s; /* Firefox 4 */
-webkit-transition: all .2s; /* Safari and Chrome */
-o-transition: all .2s; /* Opera */

}
#pop-over-wrap {
    padding: 10px;
    position: absolute;
    width: 200px;
    height: 230px;
    background-color: white;
     border-radius: 5px 5px 5px 5px; 
    -moz-border-radius: 5px 5px 5px 5px; 
    -webkit-border-radius: 5px 5px 5px 5px;
    margin-top: 20px;
    margin-left: 300px;

    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

}
#arrow {
    position: relative;
    background: url(images/arrowup.png) no-repeat;
    background-position: top center;
    height: 40px;
    margin-top: -30px;

}
#pop-over-body {


}

Answer 1

删除#pop-over-wrap css规则上的边距，并通过jQuery处理定位。

$(function(){

    var popup = $('#pop-over-wrap'),
        popupOffset = popup.outerWidth()/2,
        arrowExceed = 30; // how many pixel the arrow exceeds from the containing wrapper.

    $('#icons > img').click(function(){
        var icon = $(this),
            iconPos = icon.position(),
            iconW = this.width,
            iconH = this.height,
            popupTop = iconPos.top + iconH + arrowExceed,
            popupLeft = iconPos.left + iconW/2 - popupOffset;

        popup.css({left:popupLeft, top:popupTop});
        popup.show();
    });

});

演示 http://jsfiddle.net/ALFfs/1/
demo具有硬编码的图像宽度，因为我无法访问图像..

Answer 2

您可以在每个img上创建事件，如下所示：

$('#icons').find('IMG').each(function(){
    $(this).click(function(){  
       var idBlock = $(this).attr('id');
        //Code of showing popup window idBlock type
          var htmlBasedonIdBlock = GetBlockHtml(idBlock)
         $('#pop-over-wrap').html(htmlBasedonIdBlock)
   })
})

根据块的类型获取html的GetBlockHtml函数

你使用tipsy，所以你只需要为身体内容制作html，所有工作都将由一个人完成

如果您不使用tipsy，这里有很多其他jquery插件http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

Answer 3

检查this jquery插件以完成您想要的内容

Answer 4

看看这里：CSS Tooltips and Speech Bubbles。

您不必完全计算这些框的坐标。有很多CSS3技巧可以做到这一点。嘿，你甚至不必使用Javascript！但是，如果您考虑兼容性，请考虑使用此jQuery plugin来帮助您执行工具提示。

Answer 5

如果您将img中的每个div与其弹出一起放置，该怎么办？然后你将容器div置于相对位置，并将pop置于绝对位置？

像这样：

<div class="icon">
    <img src='images/facebook.png' id='facebook' />
    <div class="popover">
        <div id='arrow'>
        </div>
        <div id='pop-over-body'>
            Hello
        </div>
    </div>
</div>

然后在css：

.icon{
    position:relative;
}
.popover{
    position:absolute;
    left:-30px;
    top:10px;
}

你明白了吗？将图标放在无序列表中会更好。

Answer 6

您可以将div用作图像的容器和包含信息的div。例如：

<div id="container-1">
   <img src='images/facebook.png' id='facebook' />
   <div id="information-1" class="information-block hideElement"></div>
</div>
<div id="container-2">
   <img src='images/twitter.png' id='twitter' />
   <div id="information-2" class="information-block hideElement"></div>
</div>

其中

.hideElement { display: none; }
.information-block { position: relative; top: 10px; left: -20px; width: 100px;} //for example

使用jQuery，您可以在单击第一个容器时显示第一个容器的信息块：

$("#container-1").click(function() {
   $("#information-1").removeClass("hideElement");
});

如何直接在点击的图像下放置div？

6 个答案: