javascript jQuery 对话框弹出 Cookie

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21637405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 21:23:26  来源:igfitidea点击:

jQuery Dialog Popup Cookie

javascriptjquerycookies

提问by Wolf Cat

I need this popup to show only once for each visitor. When the user clicks the close button the cookie should trigger and set the popup to not show for 30 days. I have tried installing a cookie myself, but to no avail as I have limited understanding of JavaScript. I've read several posts on here relating to this, but they id not help me.

我需要这个弹出窗口对每个访问者只显示一次。当用户单击关闭按钮时,cookie 应触发并将弹出窗口设置为在 30 天内不显示。我尝试过自己安装 cookie,但没有成功,因为我对 JavaScript 的理解有限。我在这里阅读了几篇与此相关的帖子,但它们并没有帮助我。

JavaScript:

JavaScript:

<link rel="stylesheet" href="jquery-ui-1.10.3.custom/jquery-ui-1.10.3.custom.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog-modal" ).dialog({
height: 380,
width: 500,
modal: true,
buttons: {
    Ok: function() {
        $( this ).dialog( "close" );
        }
    }
});
});
</script>

HTML:

HTML:

<div id="dialog-modal" title="Please Note:" class="content-list">
    <p>If you are taking advantage of our 21 day risk free trial <strong>your credit card will not be charged for 21 days</strong> after you receive your new biofeedback headband.</p>
    <ul>
        <li>Only Available for residents of the USA</li>
        <li>No Risk - 100% Money-Back Guarantee</li>
        <li>If you're not satisfied we even pay for your return shipping</li>
    </ul>
</div>

Thanks.

谢谢。

回答by John S

You could use the jquery cookie plugin. If you include that library, you can do the following:

您可以使用jquery cookie 插件。如果包含该库,则可以执行以下操作:

$(function () {
    if (!$.cookie("notice-accepted")) {
        $("#dialog-modal").dialog({
            height: 380,
            width: 500,
            modal: true,
            buttons: {
                Ok: function () {
                    $.cookie("notice-accepted", 1, { expires : 30 });
                    $(this).dialog("close");
                }
            }
        });
    }
});

Note: You will want to add style="display: none;"to your dialog <div>so it is not displayed when you do not open the dialog.

注意:您需要添加style="display: none;"到对话框中,<div>以便在您不打开对话框时不显示。

Demo on JSFiddle

在 JSFiddle 上演示