为 jQuery UI 模式对话框设置 Cookie答案

【问题标题】：Setting up Cookie for a jQuery UI modal dialog为 jQuery UI 模式对话框设置 Cookie
【发布时间】：2018-05-07 19:11:29
【问题描述】：

我制作了一个自定义 jQuery 模态/弹出窗口并将其添加到我的 wordpress 网站。这行得通。

现在我希望访问者在单击两个按钮中的一个时保存 cookie，并且仅在 cookie 未知时才显示弹出窗口。我尝试了几个选项和线程，例如，jQuery cookie 插件、js-cookie 插件等。但从未成功完成设置。

我的代码：

$(document).ready(function () {

    //generate dialog (modal)
    jQuery("#dialogForm").dialog({
        modal: true,
        resizable: false,
        draggable: false,
        width: 730,
        height: 490,
        show: {
            effect: "blind",
            duration: 800

        }
    });

    //hide title bar
    jQuery(".ui-dialog-titlebar").hide();

    //close on press of 'Contacteer Ons' button
    jQuery('#contact').click(function (e) {
        e.preventDefault();
        jQuery('#dialogForm').dialog('close');
        $('#dialog-container').remove();
    });

    //close on press of 'Sluiten' button
    jQuery('#close').click(function (e) {
        e.preventDefault();
        jQuery('#dialogForm').dialog('close');
        $('#dialog-container').remove();
    });

    //close on ESC key
    $(document).keydown(function (event) {
        if (event.keyCode == 27) {
            jQuery('#dialogForm').dialog('close');
            $('#dialog-container').remove();
        }
    });

});

HTML

//pop-up
function boeckske_enqueue_scripts(){
    wp_enqueue_script( 'my-dialog', get_template_directory_uri() .'/js/popup.js', array( 'jquery' ), null, true );

    // If you saved your CSS as a file instead of using the Customizer:
    //wp_enqueue_style( 'my-dialog', get_stylesheet_directory_uri() .'/css/popup.css', array(), null );
}
add_action( 'wp_enqueue_scripts', 'boeckske_enqueue_scripts' );

//add HTML pop-up to footer
function boeckske_dialog_html(){ ?>
    <html>
        <head>
            <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
            <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
            <link rel="stylesheet" href="/wp-content/themes/enfold/css/jquery-ui.css" />
            <script src="/wp-content/themes/enfold/js/jquery.cookie.js"></script>
        </head>
        <body>
            <div class="modal fade" id="myModal">       
                <div id="dialog-container">
                    <div id="dialogForm">
                    <form id="myform" method="post">
                        <br><br><br>
                        <p id=title name=title><b>VERLOF</b></p>
                        <br><br>
                        <p id=eerste name=eerste>Onze toonzaal zal op <b>5 mei, 10 mei,<br>11 mei en 21 mei</b> gesloten zijn.</p>
                        <p id=tweede name=tweede>Voor dringende interventies, gelieve te <u>mailen<br>of een bericht in te spreken</u>.</p><br>
                        <br/>
                        <input type="button" name="contact" id="contact" onclick="location.href='https://www.sano-tech.be/contact/';" value="Contacteer ons" />
                        <input type="button" name="close" id="close" value="Sluiten" />
                    </form>
                    </div>
                </div>
            </div>
        </body>
    </html>
<?php }
add_action( 'wp_footer', 'boeckske_dialog_html' );

对话框

Click here

【问题讨论】：

标签： jquery wordpress jquery-ui modal-dialog

【解决方案1】：

$(document).ready(function () {

    if ($.cookie('popup') == null) {
        //show dialog (modal)
        jQuery("#dialogForm").dialog({
            modal: true,
            resizable: false,
            draggable: false,
            width: 730,
            height: 490,
            show: {
                effect: "blind",
                duration: 800

            }
        });

        //hide title bar
        jQuery(".ui-dialog-titlebar").hide();
    } else {
        var x = document.getElementById("myModal");
        x.style.display = "none";
    }
});

//close on press of 'Contacteer Ons' button
jQuery('#contact').click(function (e) {
    e.preventDefault();
    jQuery('#dialogForm').dialog('close');
    $('#dialog-container').remove();
    //alert("adding cookie");
    $.cookie('popup', 'seen', { expires: 30 });
});

//close on press of 'Sluiten' button
jQuery('#close').click(function (e) {
    e.preventDefault();
    jQuery('#dialogForm').dialog('close');
    $('#dialog-container').remove();
    //alert("adding cookie");
    $.cookie('popup', 'seen', { expires: 30 });
});

//close on ESC key
$(document).keydown(function (event) {
    if (event.keyCode == 27) {
        jQuery('#dialogForm').dialog('close');
        $('#dialog-container').remove();
    }
});

【讨论】：