Настройка Cookie для модального диалога jQuery UI - PullRequest
Новая
       11

Настройка Cookie для модального диалога jQuery UI

0 голосов
/ 07 мая 2018

Я сделал пользовательское модальное / всплывающее окно jQuery и добавил его на свой сайт WordPress.Это работает.

Теперь я хочу, чтобы посетитель, нажимая одну из обеих кнопок, сохранял cookie, и отображал всплывающее окно, только если cookie еще не известен.Я перепробовал несколько вариантов и потоков, например, плагин cookie jQuery, плагин js-cookie и т. Д., Но мне так и не удалось полностью его настроить.

Мой код:

JS 

$(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' );

Диалог

Нажмите здесь

1 Ответ

0 голосов
/ 08 мая 2018 
$(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();
    }
});
...