单击带有 cookie 的按钮后,如何关闭弹出模式?
How can I close a pop up modal once button is clicked with cookies?
我正在使用插件 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>
我认为您只是错过了在调用 setTimeout(...)
函数之前检查是否已经设置了 cookie。您可以尝试这样的操作 -->
if (!Cookies.get('hide-div')) {
setTimeout(function() {
$('#myModal').modal();
}, 15000);
}
这确保 setTimeout
仅在 hide-div
cookie 设置为 true
时才会执行。
我会将这两个脚本合并为一个,例如:
$(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,模式将不会打开。
我正在使用插件 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>
我认为您只是错过了在调用 setTimeout(...)
函数之前检查是否已经设置了 cookie。您可以尝试这样的操作 -->
if (!Cookies.get('hide-div')) {
setTimeout(function() {
$('#myModal').modal();
}, 15000);
}
这确保 setTimeout
仅在 hide-div
cookie 设置为 true
时才会执行。
我会将这两个脚本合并为一个,例如:
$(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,模式将不会打开。