彈出窗口僅顯示一次
[英]popup show only once
問題描述
我只嘗試生成一次彈出窗口。 當前彈出窗口不起作用。 我是新來的，所以我無法處理。 可以，請幫忙
這是我的jQuery代碼。 我不知道為什么這不起作用。請幫助
$(document).ready(function () { if (localStorage.getItem('popState') != 'shown') { $("#popup").delay(2000).fadeIn(); localStorage.setItem('popState', 'shown') } $('#popup-close').click(function (e) // You are clicking the close button { $('#popup').fadeOut(); // Now the pop up is hiden. }); $('#popup').click(function (e) { $('#popup').fadeOut(); }); });
div{ height : 50px; background-color:blue; }
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div class="modal fade" id="popup" > <div class="modal-dialog"> <div class="model-image"> <div class="modal-header"> <button type="button" class="popup-close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <div class="model-titles"> <div class="delivery"></div></div> <div class="custom-discount"> <div class="amt"></div></div> </div> </div> </div> </div> </body>
1 個解決方案
解決方案1
0 已采納 2017-11-06 19:56:56
您在這里很近。 我將模式div設置為display: none因為現在，無論是否設置了localStorage項目，它始終可見。 這就是我要做的。
CSS：
.modal {
display: none;
}
JS：
if (localStorage.getItem('popState', 'value') != 'shown') {
$("#popup").delay(2000).fadeIn();
localStorage.setItem('popState', 'shown');
console.log('localstorage item set.');
} else {
console.log('No modal for you.');
}
$('#popup-close').on('click', function(e) {
$('#popup').fadeOut(); // Now the pop up is hiden.
});
$('#popup').on('click', function(e) {
$('#popup').fadeOut();
});
使用此代碼，您將檢查是否已設置popstate值，如果未設置，則將在模式中淡出兩秒后消失，設置localStorage項並將“ localStorage項設置”記錄到控制台。 如果您要重新加載使用該頁面的頁面，則會看到“沒有模態適合您”。 記錄到控制台。 console.log項僅用於測試目的，因此當您准備在生產環境中使用此代碼時，我將其刪除。
JavaScript彈出窗口僅顯示一次
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.