twitter-bootstrap Bootstrap - 在准备好的文档上显示弹出框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17231264/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - Show popover on document ready
提问by Alias
on my application, when a user is logged in and browsing their name and avatar is displayed in the top right of the navbar. Example:
在我的应用程序中，当用户登录并浏览他们的姓名和头像时，导航栏的右上角会显示。例子：
<li>
<a class="btn" href="#">
<img id="user-avatar" src="{{ $userAvatar }}" alt="" /> {{ $userNickname }}
</a>
</li>
However I would like a popover to show for 5 seconds, below the username/avatar area that says "You have successfully logged in". This is possible, as I have a session which is set for only the page after a successful login (after the page is changed/refreshed it is destroyed).
但是，我希望在显示“您已成功登录”的用户名/头像区域下方显示 5 秒钟的弹出窗口。这是可能的，因为我有一个会话，它只为成功登录后的页面设置（在页面更改/刷新后它会被销毁）。
My plan was to have the popover attributes set on the list item already, and when the login session is set it run a bit of javascript to trigger the popover:
我的计划是已经在列表项上设置了 popover 属性，当设置登录会话时，它会运行一些 javascript 来触发 popover：
<li id="popover" rel="popover" data-content="You Logged In" data-original-title="Success!">
<a class="btn" href="#">
<img id="user-avatar" src="{{ $userAvatar }}" alt="" /> {{ $userNickname }}
</a>
</li>
@if (Session::has('login_success'))
<script type="text/javascript">
$(document).ready(function() {
$('#popover').popover();
});
</script>
@endif
I know I'm missing the data-animation="bottom", but whatever I do just nothing happens!
我知道我错过了 data-animation="bottom"，但无论我做什么，什么都没有发生！
回答by Ryan McDonough
The code: $('#popover').popover();just instantiates the popover for the element, it doesn't show it.
代码： $('#popover').popover();只是实例化元素的弹出窗口，它不显示它。
You want to use:
你想使用：
<script type="text/javascript">
$(document).ready(function() {
$("#popover").popover('show');
});
</script>
If that fails to work in a browser try running it after the window has fully loaded:
如果这在浏览器中不起作用，请尝试在窗口完全加载后运行它：
<script type="text/javascript">
$(window).load(function(){
$("#popover").popover('show');
});
</script>
