1

I have a website with social icons listed across the page. When you click on one, I want a window to pop under with more information. Here is a picture of what I want it to look like after the user clicks on an icon.

enter image description here

That entire pop-over is self contained in it's own div.

I'm looking for a more dynamic method then just hard coding in different coordinates for each button.

Thanks in advance.

The 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>

The 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 {


}
4

6 回答 6

1

Remove the margins on the #pop-over-wrap css rule, and handle the positioning through 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();
    });

});

Demo at http://jsfiddle.net/ALFfs/1/
demo has hardcoded image widths because i have no access to the images..

于 2012-09-23T18:16:27.147 回答
0

看看这里：CSS 工具提示和语音气泡。

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

于 2012-09-23T18:15:49.773 回答
0

What if you put each img in a div together with its pop over. Then you position the container div relative and position the pop over absolute?

Like this:

<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>

And then in css:

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

You get the idea? It would be even nicer to put the icons in an unordered list.

于 2012-09-23T18:17:29.967 回答
0

检查这个jquery 插件来完成你想要的

于 2012-09-23T18:11:57.967 回答
0

您可以将 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");
});
于 2012-09-23T18:20:08.520 回答
0

您可以像这样在每个 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，所以你只需要为body的内容制作html，所有的工作都将由一个人完成

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

于 2012-09-23T18:06:25.873 回答