单击/接受/确认按钮后，如何不再次显示模态? [英] How to NOT show a modal again after a button is clicked/accepted/confirmed?

问题描述

我显示了一个引导模式，需要确认/接受/单击(按钮:#id_complete)才能访问该页面.为了激活按钮，用户需要单击两个复选框.目标是:我想让模式只显示在会话中尚未单击/确认/接受#id_complete按钮之前.如果单击/确认/接受按钮，则模式不会再次出现. Cookie的有效期为1天.我正在使用jquery-cookie-1.4.0

I have a bootstrap modal showing up that needs to be confirmed/accepted/clicked (button: #id_complete) in order to access the page. In order to activate the button the user needs to click two check boxes. The goal is: I want to have the modal to show up only until the #id_complete button IS NOT clicked/confirmed/accepted yet in the session. If the button is clicked/confirmed/accepted the modal shouldn't show up again. The cookie should be valid for 1 day. I'm using jquery-cookie-1.4.0

以下示例仅在首次访问网站时显示，但这不是目标.

The below example only shows up on the first sites visit though, which is not the goal.

<button id="id_complete" type="button" class="btn btn-default" data-dismiss="modal" disabled="disabled">I Accept!</button>

if ($.cookie('pop') == null) {
     $('#myModal').modal({
            backdrop: 'static'
         });
     $.cookie('pop', '1');
 } 

 $('#accepted1,#accepted2').click(function () {
    if ($('#accepted1:checked,#accepted2:checked').length == 2)
        $('#id_complete').removeAttr('disabled');
    else
        $('#id_complete').attr('disabled','disabled');
});

推荐答案

调用模态函数不会暂停JavaScript执行，这意味着将立即设置cookie.

Calling the modal function won't pause JavaScript execution which means the cookie will be set immediately.

要使Cookie在一天后过期，请添加一个expires属性设置为1的对象.

To make the cookie expire after a day add an object with the expires property set 1.

在模态上听hidden.bs.modal或hidden事件，具体取决于您所使用的引导程序版本，然后设置cookie:

Listen for the hidden.bs.modal or the hidden event on the modal depending on which version of bootstrap you have and then set the cookie:

// Bootstrap <2.3.2
if($.cookie('pop') == null) {
    $('#myModal').modal({
        backdrop: 'static'
    }).on('hidden', function(){
        $.cookie('pop', '1', {expires: 1});
    });
}
// Bootstrap 3
if($.cookie('pop') == null) {
    $('#myModal').modal({
        backdrop: 'static'
    }).on('hidden.bs.modal', function(){
        $.cookie('pop', '1', {expires: 1});
    });
}

要在评论中回答问题:

要使其在页面会话之后过期，可以使用window.sessionStorage对象并存储上一次接受模式的时间:

To make it expire after the page session you can use window.sessionStorage object and store when the modal was last accepted:

var lastAccepted = parseInt(sessionStorage.lastAccepted);
// If lastAccepted isn't a number (because it doesn't exist or some other reason)
// or the last acceptance was more than a day ago 
if(isNaN(lastAccepted) || Date.now() - lastAccepted > 86400000) {
    $('#myModal').modal({
        backdrop: 'static'
    }).on('hidden.bs.modal', function(){
        sessionStorage.lastAccepted = Date.now();
    });
}

这篇关于单击/接受/确认按钮后，如何不再次显示模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！