顯示 Bootstrap Modal 首次頁面加載

Question

當一個人第一次訪問一個頁面時（登錄我的應用程序后），我試圖顯示一個引導模式。 我想使用模態提供“入門”視頻，並提供“不再向我顯示此內容”復選框，以便訪問者可以在以后登錄時繞過“入門模態”。

通過以下教程，我能夠在頁面加載時顯示模態：

在頁面加載時啟動 Bootstrap Modal

但現在我被困在如何讓它在用戶登錄后第一次訪問頁面時顯示。（它當前在頁面刷新等時啟動）

我是 javascript 和編程的新手，並使用 Django Python 2.7.4 創建了我的應用程序

我非常感謝時間和專業知識。

Answer 1

為此，您需要使用一種方法來存儲有關在網站訪問之間持續存在的用戶數據，這通常稱為session 。 在這種特殊情況下，聽起來用戶可能沒有登錄，這更具體地稱為anonymous session 。

有許多選項可用於存儲匿名會話。 最快和最簡單的方法是使用cookie ，但其他選項包括基於文件的會話、Html5 存儲或數據庫。

根據您所寫的內容，我想說 cookie 可能是最適合您的解決方案。

而且，如您所料，Django 內置了簡化 cookie 的功能。 我建議查看關於 Django sessions 的文檔，我發現它非常易於訪問且易於學習，以了解如何實現這一點。

如果您對在 Django 中使用 cookie（或匿名會話）有任何更具體的問題，請告訴我，我會盡力提供幫助。

Answer 2

您可以將 jquery.cookies.js 與 modal.js 結合使用，只加載一次頁面，然后設置一個過期 cookie。

            <script src="/path/to/jquery.cookie.js"></script>
            <script>
            $(document).ready(function() {
                 if ($.cookie(‘pop’) == null) {
                     $(‘#myModal’).modal(‘show’);
                     $.cookie(‘pop’, ’7');
                 }
             });
            </script>

您可以在本教程中找到更多詳細信息：

http://calebserna.com/bootstrap-modal-email-subscription-form/

Answer 3

首次加載頁面時顯示 Bootstrap Modal

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js">
</script>
<script type="text/javascript">
 $(document).ready(function() {
     if ($.cookie('pop') == null) {
         $('#myModal').modal('show');
         $.cookie('pop', '1');
     }
 });
</script>

您可以設置隱藏模態的天數

Answer 4

好吧，您可以使用localstorage來存儲發生的操作，因此它是持久的，或者您可以使用一個名為“ shown的cookie並在開始時將其設置為 false，在顯示模態之后，您只需將其設置為 true。

Answer 5

肯定有辦法用 Django 做到這一點。 例如，您可以存儲用戶的 IP，並跟蹤使用該 IP 的用戶是否曾經點擊過“不再顯示”按鈕。 這將是確定您沒有向要求不觀看視頻的人展示視頻的唯一真正方法。 在前端，用戶總是可以清除自己的 cookie 或本地存儲，這樣前端跟蹤就可能會丟失。

也就是說，這是一個實際示例，因為您提到是 JavaScript 新手：

// When the user clicks the button...
localStorage.setItem('no_display', 'true');

// When a user visits the page...
var no_display = localStorage.getItem('no_display');
if (no_display !== 'true') {
  display_the_modal();
}

Answer 6

你可以使用這個腳本，我希望這會奏效：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
</script>
  
<script type="text/javascript">
 $(document).ready(function() {
     if (sessionStorage.getItem('#myModal') !== 'true') {
         $('#myModal').modal('show');
         sessionStorage.setItem('#myModal','true');     
     }
 });
</script>

Answer 7

你可以試試這個可運行的代碼——

 $(document).ready(function() { if ($.cookie('pop') == null) { $('#myModal').modal('show'); $.cookie('pop', '7'); } });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>

在這里可以找到更多信息。

如果你以這種方式接近，你就不會遇到你的問題（對我有用）。

因此，所做的是將狀態保存在 cookie 中。 根據cookie，決定是否需要在第一次顯示彈出窗口。