javascript - 如何将 div 直接放置在点击图像的下方？

Question

我有一个网站，整个页面都列出了社交图标。当您单击其中一个时，我希望弹出一个窗口，其中包含更多信息。这是用户单击图标后我希望它看起来像的图片。

整个弹出窗口都包含在它自己的 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/
演示具有硬编码的图像宽度，因为我无法访问图像..