Setting up Cookie for a jQuery UI modal dialog

I made a custom jQuery modal/pop-up and added it to my wordpress website.
This works.

Now I want a visitor when he clicks one of both buttons that a cookie is saved and only shows the popup if the cookie is not yet known.
I tried several options and threads, for example, jQuery cookie plugin, js-cookie plugin, etc… but never succeed in getting it setup completely.

My code:

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

Dialog

Click here

Solution:

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.