jquery - Reveal Modal with cookie 只显示一次

Question

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

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

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

Answer 1

使用 carhartl 的jquery-cookie插件。

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

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

Answer 2

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

是相同的代码，但有 3 秒的延迟。:)

Answer 3

我有一个类似的场景，只显示一个依赖于星期几的 jquery 模式。我使用了dateJS插件和 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
});

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

任何关于如何优化的反馈都会很棒！

Answer 4

这就是我使用 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

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

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