gpt4 book ai didi

jquery - Bootstrap - 在文档准备好时显示弹出窗口

转载 作者:搜寻专家 更新时间:2023-10-31 23:06:18 24 4
gpt4 key购买 nike

在我的应用程序中,当用户登录并浏览时,他们的姓名和头像会显示在导航栏的右上角。示例:

<li>
<a class="btn" href="#">
<img id="user-avatar" src="{{ $userAvatar }}" alt="" /> {{ $userNickname }}
</a>
</li>

但是我希望弹出窗口显示 5 秒,在用户名/头像区域下方显示“您已成功登录”。这是可能的,因为我有一个仅在成功登录后为页面设置的 session (在页面更改/刷新后它被销毁)。

我的计划是在列表项上设置弹出窗口属性,当设置登录 session 时,它会运行一些 javascript 来触发弹出窗口:

<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

我知道我错过了 data-animation="bottom",但无论我做什么都没有任何反应!

最佳答案

代码:$('#popover').popover(); 只是为元素实例化 popover,并没有显示它。

你想使用:

<script type="text/javascript">
$(document).ready(function() {
$("#popover").popover('show');
});
</script>

如果无法在浏览器中运行,请尝试在窗口完全加载后运行它:

<script type="text/javascript">
$(window).load(function(){
$("#popover").popover('show');
});
</script>

关于jquery - Bootstrap - 在文档准备好时显示弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17231264/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com