1

我正在尝试将引导弹出窗口用作 facebook 的新朋友、新消息和新活动弹出窗口之类的窗口。但就我而言，我必须右对齐 popover 。如果我右对齐，我的内容不会自动适合并且消息的某些部分隐藏在顶部。

你可以看到下面的 JS fiddle

http://jsfiddle.net/kXLv5/18/

$( function(){
                $("#example").popover({placement:'right',content:'<ul> <li> Friend list 1 </li> <li> Friend list 2 </li> <li> Friend list 3 </li> <li> Friend list 4 </li> <li> Friend list 5 </li><li> Friend list 5 </li><li> Friend list 6 </li><li> Friend list 7 </li></ul>', html:true});
    $("#example").popover("show");
                });

<img id='example' style="opacity:0.4;filter:alpha(opacity=40);margin-top:20px;" alt="Friends"
width="40px" height="40px"
src="http://www.experienceworks.org/images/content/pagebuilder/twitter-bird-light-bgs_12-4-12.png" title="Friends">

有什么建议可以解决这个问题吗？（或任何其他实现新消息弹出框的方法，如 facebook ）

我正在寻找类似下面的东西..

在此处输入图像描述

4

3 回答 3

1

您需要覆盖一些引导样式以实现此目的：

#friend-list .arrow{
top:0;
margin-top:14px;
}

#friend-list .popover{
top:0 !important;
margin-top:10px;
}

<div id='friend-list'>
<img id=....
</div>

检查这个小提琴：

http://jsfiddle.net/CB8pr/

于 2013-07-27T19:35:37.590 回答
0

您应该增加给定图像的 margin-top = 50px 大约。

于 2013-07-27T18:10:32.010 回答
0 
<img id='example' style="opacity:0.4;filter:alpha(opacity=40);margin-top:100px;" alt="Friends"
width="40px" height="40px"
src="http://www.experienceworks.org/images/content/pagebuilder/twitter-bird-light-bgs_12-4-12.png" title="Friends">
于 2013-07-27T18:13:52.047 回答