3

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

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

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

我的计划是已经在列表项上设置了弹出框属性，并且在设置登录会话时，它会运行一些 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"，但无论我做什么都没有发生！

4

1 回答 1

6

代码： $('#popover').popover();只是实例化元素的弹出框，它不显示它。

你想使用：

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

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

<script type="text/javascript">
    $(window).load(function(){
       $("#popover").popover('show');
    });
</script>
于 2013-06-21T08:59:53.903 回答