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=".9.1.js"></script>
<script src=".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.

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./jquery-1.9.1.js"></script>
<script src="http://code.jquery./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.

• javascript
• jquery
• cookies

1 Answer 1

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