Bootstrap - 在我的應用程序上顯示彈出文檔

當用戶登錄並瀏覽其名稱和頭像顯示在導航欄的右上角時。例如：Bootstrap - 在我的應用程序上顯示彈出文檔

<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

我知道我失蹤數據動畫=「底部」，但無論我做什麼都沒有發生！

來源

2013-06-21 Alias

如果你嘗試'$（'＃酥料餅什麼'）.popover（）。click（）;'應該在點擊時激活彈出窗口，或者您可以：'.popover（'show'）' –

您是否添加了正確的JavaScript文件？即。 'bootstrap-tooltip.js'和'bootstrap-popover.js'。因爲後者取決於前者。 – scarecrow

代碼：$('#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-21 08:59:53

啊，window.load工作！還有'秀'也是如此。歡呼聲，現在只需要讓它看起來很好：> – Alias

Bootstrap - 在我的應用程序上顯示彈出文檔

回答

相關問題