Question

jQuery 对话框弹出 Cookie

2014-02-07

18230

javascript jquery cookies

我需要这个弹出窗口只对每个访问者显示一次。当用户点击关闭按钮时，cookie 应该会触发并将弹出窗口设置为 30 天内不显示。我曾尝试自己安装 cookie，但由于我对 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：

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

谢谢。

Answer 1

您可以使用 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");
                }
            }
        });
    }
});

注意：您需要将 style="display: none;" 添加到对话框 <div> ，以便在您未打开对话框时不会显示它。

JSFiddle 上的演示