如何在单击/接受/确认按钮后不再显示模态

How to NOT show a modal again after a button is clicked/accepted/confirmed?

本文关键字：不再 显示 模态 按钮 接受 单击 确认      更新时间：2023-09-26

>我有一个引导模式，需要确认/接受/单击（按钮：#id_complete）才能访问该页面。为了激活按钮，用户需要单击两个复选框。目标是：我希望模式仅在会话中尚未单击/确认/接受#id_complete按钮时才显示。如果单击/确认/接受按钮，则模式不应再次显示。饼干的有效期应为 1 天。我正在使用jquery-cookie-1.4.0

下面的示例仅在第一次访问网站时显示，这不是目标。 

<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 将立即设置。

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

根据您拥有的引导程序版本，侦听模式上的hidden.bs.modal或hidden事件，然后设置 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 对象并存储上次接受模式的时间：

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

设置 cookie 的行需要移动按钮的单击处理程序。

在

当前位置，如果未找到cookie，无论用户在做什么，都将创建它

相关文章：