jQuery 显示带有 cookie 的 Modal 只显示一次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13352658/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reveal Modal with cookie to display only once
提问by callmedpit
I'm using the (Reveal Modal) and loading it on page by using this code:
我正在使用（Reveal Modal）并使用以下代码将其加载到页面上：
$(document).ready(function() {
$('#myModal').reveal();
});
How can I modify this, I believe using cookies (is there another way?), so that it will only pop one time for a user over the course of lets say 1 week?
我该如何修改它，我相信使用 cookie（还有另一种方法吗？），这样它只会在 1 周内为用户弹出一次？
回答by mreq
Use the jquery-cookieplugin by carhartl.
使用carhartl的jquery-cookie插件。
Check for cookie before showing the modal. If it's present, don't display it. If it's not, store a new cookie and display modal.
在显示模态之前检查 cookie。如果存在，则不要显示它。如果不是，则存储一个新的 cookie 并显示模态。
$(document).ready(function() {
if ($.cookie('modal_shown') == null) {
$.cookie('modal_shown', 'yes', { expires: 7, path: '/' });
$('#myModal').reveal();
}
});
回答by starkbr
Inspired on the code of mreqI created an auto-load using Foundation 5 that appears only after 3 seconds:
受mreq我使用 Foundation 5 创建的自动加载代码的启发，该代码仅在 3 秒后出现：
$(document).ready(function() {
if ($.cookie('modal_shown') == null) {
$.cookie('modal_shown', 'yes', { expires: 7, path: '/' });
setTimeout(function(){
$("#myModal").foundation('reveal', 'open');
}, 3000);
}
});
Is the same code, but with 3s delay. :)
是相同的代码，但有 3 秒的延迟。:)
回答by n3my
I had a similar scenario, to only display a jquery modal with dependency on the current day of the week. I utilized the dateJSplugin along with the jquery cookie plugin.
我有一个类似的场景，只显示一个依赖于当前日期的 jquery 模式。我使用了dateJS插件和 jquery cookie 插件。
Here is my code:
这是我的代码：
$(document).ready(function () {
/* We first check if the cookie is equal to null (doesn't exist), if so, we set the cookie to the current site path */
if($.cookie('modal') == null){
// Set the cookie
$.cookie('modal', 'yes', { path: '/' });
/* Now that the cookie is set once, load the specials */
// Load Monday's Specials
if( Date.today().is().monday() ){
$('#myModal-Monday').reveal();
}
// Load Tuesday's Specials
else if ( Date.today().is().tuesday() ){
$('#myModal-Tuesday').reveal();
}
else if( Date.today().is().wednesday() ){
$('#myModal-Wednesday').reveal();
}
else if( Date.today().is().thursday() ){
$('#myModal-Thursday').reveal();
}
else if( Date.today().is().friday() ){
$('#myModal-Friday').reveal();
}
else if( Date.today().is().sunday() ){
$('#myModal-Sunday').reveal();
}
}
// The cookie will delete when the browser-closes. Thus only displaying once on the site until the browser is closed
});
So this way the modal is only displayed once during the users browser session and re-displayed only when the user closes/re-opens the browser.
因此，这种方式仅在用户浏览器会话期间显示一次，并且仅在用户关闭/重新打开浏览器时重新显示。
Any feedback on how to optimize would be great!
任何关于如何优化的反馈都会很棒！
回答by drjorgepolanco
This is how I did it with jQuery and plain Js. It is well explained here: http://www.w3schools.com/js/js_cookies.asp
这就是我用 jQuery 和普通 Js 做的。这里有很好的解释：http: //www.w3schools.com/js/js_cookies.asp
// Set the Cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
// Get the Cookie
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if ( c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
// Check if Cookie exists
function checkCookie() {
// Get the cookie called "visited"
var visited = getCookie("visited");
// If it exists, print the Cookie to the Console
if (visited == "true") {
console.log(document.cookie);
}
else {
// If not, add the class 'is-visible' to my modal called '.mhc-intro-modal'
// and create a the cookie "visited=true" expiring in 15 days.
$('.mhc-intro-modal').addClass('is-visible');
$('body').addClass('hide-overflow');
setCookie("visited", "true", 15);
}
}
// When document is ready check for the cookie
$(document).ready(function() {
checkCookie();
});
// Close the modal
$('.mhc-intro-modal').on('click', function(event) {
if ( $(event.target).is('.mhc-intro-modal-close') || $(event.target).is('.mhc-intro-modal') ) {
event.preventDefault();
$(this).removeClass('is-visible');
$('body').removeClass('hide-overflow');
}
});
css
css
body {
background-color: #fbfbfb;
&.hide-overflow {
overflow: hidden;
}
}
.mhc-intro-modal {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(21, 21, 21, 0.55);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
&.is-visible {
opacity: 1;
visibility: visible;
z-index: 11;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
}
html
html
<div class="mhc-modal mhc-intro-modal" role="alert">
<div class="mhc-modal-inner">
<div class="mhc-modal-info-container">
<a href="#0" class="mhc-intro-modal-close">Close</a>
<div class="mhc-copy-container" style="background-image: url('your-image-path.jpg');">
<h3 class="mhc-title">The Title</h3>
<p class="mhc-description">The description bla bla bla</p>
</div>
</div>
</div>
</div>
