我正在使用插件js-cookie来创建cookie。所以,我有一个bootstrap模式,在15秒后弹出一个电子邮件订阅表单。我想要的是订阅按钮创建一个cookie,以防止将来弹出窗口。我认为我的逻辑在这里可能是错误的。开发工具显示cookie,但我刷新,弹出窗口仍然出现。
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content" style="background-color: rgb(255, 241, 237);">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel" style="text-align: center;font-size: 60px; font-family: 'Allura', cursive;margin-top: 25px;">
Let's be mom friends!
</h4>
<h6 style="text-align: center; text-transform: uppercase; font-family: raleway;">
Subscribe today to receive exclusive MIM content updates directly to your inbox!
</h6>
<form style="padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogspot/CqrSa', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p style="font-family: raleway; text-transform: uppercase; margin-top: 20px;">
Enter your email address:
</p>
<p>
<input type="text" style="width:250px" name="email"/>
</p>
<input type="hidden" value="blogspot/CqrSa" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" class="btn btn-primary" id="sub-button" style="font-family: raleway; text-transform: uppercase; margin-bottom: 25px;"/>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
setTimeout(function() {
$('#myModal').modal();
}, 15000);
</script>
....其他JS库在这里......
<!-- Latest js-cookie-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.2/js.cookie.js"> </script>
<script>
jQuery(document).ready(function($) {
$("#sub-button").click(function () {
Cookies.set('hide-div', true, { expires: 365 });
});
});
</script>
答案 0 :(得分:2)
我将两个脚本合并为一个,例如:
$(document).ready(function(){
if(!Cookies.get('hide-div')){
setTimeout(function() {
$('#myModal').modal();
}, 15000);
}
$("#sub-button").click(function () {
Cookies.set('hide-div', true, { expires: 365 });
});
});
这样,如果客户端已将'hide-div'cookie设置为true,则模式将不会打开。
答案 1 :(得分:0)
我认为在调用setTimeout(...)
函数之前,如果已经设置了cookie,我只是错过了检查。你可以尝试这样的事情 - &gt;
if (!Cookies.get('hide-div')) {
setTimeout(function() {
$('#myModal').modal();
}, 15000);
}
这可确保setTimeout
只有在hide-div
Cookie设置为true
时才会执行。