在我的应用程序上,当用户登录并浏览他们的名字时,导航栏的右上方会显示头像。例如:
<li>
<a class="btn" href="#">
<img id="user-avatar" src="{{ $userAvatar }}" alt="" /> {{ $userNickname }}
</a>
</li>
但是我希望弹出窗口显示5秒,低于用户名/头像区域,显示“您已成功登录”。这是可能的,因为我有一个成功登录后只为页面设置的会话(在页面被更改/刷新后它被销毁)。
我的计划是已经在列表项上设置了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
我知道我错过了数据动画=“底部”,但无论我做什么都没有发生!
答案 0 :(得分:5)
代码:$('#popover').popover();
只是实例化元素的弹出窗口,它不会显示它。
您想使用:
<script type="text/javascript">
$(document).ready(function() {
$("#popover").popover('show');
});
</script>
如果在浏览器中无效,请尝试在窗口完全加载后运行它:
<script type="text/javascript">
$(window).load(function(){
$("#popover").popover('show');
});
</script>