弹出窗口仅显示一次
[英]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.