jQuery模式弹出窗口在每个用户会话中仅显示一次 [英] Jquery modal popup display only once per user session

问题描述

我有一个jquery函数，可在页面加载时显示模式弹出窗口.有没有办法让它在每个用户会话中仅显示一次.我有很多帖子，但是出于任何原因，我都无法让它们在我的脚本中正常工作.

I have a jquery function that displays a modal popup when the page loads. Is there a way so it only displays once per user session. I have rad many posts but for whatever reason I can't get them to work in my script.

我的剧本:

$(document).ready(function() {

    $(window).load(function(){
        $( "#dialog1" ).dialog();
    });

});

模式弹出窗口由以下组成:

The modal popup is made up of:

<div id="dialog1" title="IMPORTANT!">
    <div class="imaindateselleft_padding_right_red">Content here</div>
</div>

在此先感谢您的时间和帮助.

Mant thanks in advance for your time and help.

推荐答案

一种实现此目的的方法是与cookie集成.让它显示对话框并存储该对话框已显示在cookie中的值，以便下次不再显示.

One way to achieve this is to integrate with cookie. Let it display the dialog and store the value that the dialog has been shown in the cookie so it won't be displayed next time.

在这种方法中，我正在使用 jQuery Cookie . (随时使用香草javascript来读写cookie).而且我还假设您使用jQuery UI调用dialog.

And in this approach, I am using jQuery Cookie. (Feel free to use vanilla javascript to r/w cookies). And I also assume you use jQuery UI to call dialog.

$(document).ready(function() {
    var dialogShown = $.cookie('dialogShown');

    // On newer versions of js-cookie, API use:
    // var dialogShown = Cookies.get('dialogShown');

    if (!dialogShown) {
        $(window).load(function(){
            $( "#dialog1" ).dialog();
            $.cookie('dialogShown', 1);
            // On newer versions of js-cookie, API use:
            // Cookies.set('dialogShown', 1);

        });
    }
    else {
        $("#dialog1").hide();
    }
});

上面的代码所做的只是在对话框弹出之前简单地设置cookie.让同一用户再次看到对话框的唯一方法是 Cookie过期时(您可以设置)，或者用户清除cookie.

What the code above does, is simply to set the cookie once the dialog has been popped before. The only way to let the same user to see the dialog again is when the cookie expires (which you can set), or the user clears the cookies.

编辑:第二种方法，如果浏览器支持，则可以使用localStorage.

Edit: Second way to achieve this, you can use your localStorage if the browser supports it.

$(document).ready(function() {
    var dialogShown = localStorage.getItem('dialogShown')

    if (!dialogShown) {
        $(window).load(function(){
            $( "#dialog1" ).dialog();
            localStorage.setItem('dialogShown', 1)
        });
    }
    else {
        $("#dialog1").hide();
    }


});

这篇关于jQuery模式弹出窗口在每个用户会话中仅显示一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！