Jquery 使用cookie显示模态以仅显示一次

我使用（）并使用以下代码将其加载到页面上：

$(document).ready(function() {
    $('#myModal').reveal();
});

我相信我该如何修改它，使用cookies（还有其他方法吗？），这样用户在一周内只会弹出一次，比如说一周？

使用carhartl的插件

在显示模式之前检查cookie。如果它存在，不要显示它。如果不是，则存储一个新的cookie并显示模式

$(document).ready(function() {
    if ($.cookie('modal_shown') == null) {
        $.cookie('modal_shown', 'yes', { expires: 7, path: '/' });
        $('#myModal').reveal();
    }
});

---

我有一个类似的场景，只显示一个依赖于一周中当前日期的jquery模式。我使用了这个插件和jquery cookie插件

这是我的密码：

$(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
});

因此，通过这种方式，模式在用户浏览器会话期间仅显示一次，并且仅在用户关闭/重新打开浏览器时重新显示

---

任何关于如何优化的反馈都将非常好 Meq代码的启发下，我创建了一个自动加载，使用基础5，它只出现在3秒之后：

$(document).ready(function() {
  if ($.cookie('modal_shown') == null) {
      $.cookie('modal_shown', 'yes', { expires: 7, path: '/' });
      setTimeout(function(){
         $("#myModal").foundation('reveal', 'open');
      }, 3000);
   }
});

---

是相同的代码，但有3s的延迟。：）

我就是这样使用jQuery和纯Js的。这里有很好的解释：

html

标题
描述一文不值

谢谢你的回答，但是我自己想清楚接下来的步骤有点费劲……你有没有可能说得更具体一点？好了。不要忘记同时包含jQuery和jQueryCookieJS文件。谢谢！还有一个问题。我们的站点位于主域，而存储位于子域（store.domain.com）。如果你访问其中一个，有没有办法为这两个设置cookie？我不确定这是否可行。搜索SO，如果找不到答案，请提出另一个问题！：）@Jorgepolanco博士这是饼干的名字。如果你愿意的话，你可以用一个不同的名字。我知道这个名字很旧，但正是我要找的。似乎无法让它工作。页面上有jQuery，但根本没有弹出窗口。没有错误。。。Cookie设置好后，可以看到它。

//  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');
    }
});

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;
    }
}

<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>