1

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.

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>

Thanks.

Wolf Cat
  • 171
  • 1
  • 3
  • 18

1 Answers1

5

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

$(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.

Demo on JSFiddle

John S
  • 21,212
  • 8
  • 46
  • 56
  • So I just realized this does not work if the X is clicked to close the dialog. Any suggestions? – Wolf Cat Feb 13 '14 at 21:51
  • 2
    @WolfCat - One option would be to hide the X (close) button. I recommend the technique from [this answer](http://stackoverflow.com/a/4287933/859640). Of course, if you do this, you should also set `closeOnEscape: false`; Otherwise the user can still close the dialog by pressing the `Esc` key. ([jsfiddle](http://jsfiddle.net/Gvtfx/3/)) Another option would be to move the code that sets the cookie into an event handler for the "close" event. Then it will get executed no matter how the user closes the dialog. ([jsfiddle](http://jsfiddle.net/Gvtfx/1/)) – John S Feb 14 '14 at 15:12