每位使用者彈窗彈出一次

Question

在我的網站中，我正在使用帶有一些輸入控件（名稱，電子郵件，按鈕）的簡單模式彈出窗口。 模態彈出的目的是：

• 填寫所有必填字段后，如果用戶按“提交”按鈕，他們將獲得一個.pdf文件。
• 我在加載時啟動模式。

在這里，我正在嘗試做：

1. 僅對用戶打開一次模式彈出窗口，或者
2. 不想向以前已經填寫表單的用戶顯示模式彈出窗口

這是我的模式彈出窗口的代碼：

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

 <div class="modal fade" id="eBookModal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <div class="row"> <h4 class="modal-title text-center" style="color:#FFFFFF;">Download eBook</h4> </div> </div> <div class="modal-body"> <form role="form" id="eBookform" class="contact-form" action="file.pdf"> <div class="row"> <div class="col-md-12"> <div class="form-group"> <input type="text" class="form-control form-text" name="FName" autocomplete="off" id="eBook_FName" placeholder="First Name" required> </div> </div> <div class="col-md-12"> <div class="form-group"> <input type="text" class="form-control form-text" name="LName" autocomplete="off" id="eBook_LName" placeholder="Last Name" required> </div> </div> <div class="col-md-12"> <div class="form-group"> <input type="email" class="form-control form-text" name="email" autocomplete="off" id="eBook_email" placeholder="E-mail" required> </div> </div> </div> <div class="row"> <div class="col-md-12 text-center" id="eBook_download"> <button type="submit" class="btn main-btn" style="color:#fff !important;">Download Now</button> </div> </div> </form> </div> </div> </div> </div> 

Answer 1

您必須保留模態顯示的記錄。 要存儲該信息，可以使用cookie或localStorage 。 根據存儲的值，您可以決定是否顯示模式。

下面的示例以localStorage為例：

$(document).ready(function () {
    // Check if user saw the modal
    var key = 'hadModal',
        hadModal = localStorage.getItem(key);

    // Show the modal only if new user
    if (!hadModal) {
        $('#eBookModal').modal('show');
    }

    // If modal is displayed, store that in localStorage
    $('#eBookModal').on('shown.bs.modal', function () {
        localStorage.setItem(key, true);
    })
});

也可作為Codepen使用 。

如果您只想對已經提交表單的人員隱藏模式，則應在表單提交時設置標志，如下所示：

$('#eBookform').on('submit', function (event) {
    // event.preventDefault();// depending on your use case
    localStorage.setItem(key, true);
})

注意：要重置存儲的值，只需調用localStorage.removeItem('hadModal') 。

Answer 2

如果您只是第一次顯示模式，而以前的代碼不起作用，請嘗試此！

$(window).load(function(){    
var Modal = document.getElementById('myModal'); 
var key = 'hadModal',
hadModal = localStorage.getItem(key);

if (!hadModal) {
    Modal.style.display = "block";
    localStorage.setItem(key, true);
}

});