jQuery UI Dialog display only one time on page

I am using jQuery UI Dialog on the homepage with auto open set to true so it displays the popup as soon as the user comes to the website. here the development site

http://dev.startingpointnh.org/

Read More

As you can see the dialog box work perfectly but I just want to show it only once. Currently every time the user comes back to the homepage or reloads the page, the popup displays again.

I am wondering if there is way to display it one time once the close this message button or esc key is pressed like this site does

http://www.janedoe.org/

Any advise is appreciated.

Thanks

Related posts

Leave a Reply

2 comments

  1. Store that information in your cookies. Check out some more details here.

    Basically, add a variable that is stored as true when the user exits the dialog at the close function. Then store the variable:

    document.cookie = "hasSeen: true"
    

    Then on the page load, read the cookie:

    var hasSeen = document.cookie
    

    And set your autoOpen variable to that cookie:

    if(hasSeen) {
        $("#openDialog").dialog({
             autoOpen: false
        });
    }
    

    That’ll do it!

  2. Thanks Guys appreciate it. I have added a cookie like below and works perfectly when close this message button is clicked. but its still shows when the esc key or the x button at the top is clicked. How to reference these two also

    <script type="text/javascript">
      jQuery(document).ready(function(){
       if( document.cookie.indexOf( "showOnce" ) < 0 ) {
       jQuery('#dialog').dialog({
        modal: true,
        width: 740,
        resizable: true,
        buttons: {
        "Close This Message": function() {
         jQuery( this ).dialog( "close" );
          document.cookie = "showOnce=true;";
        }
    }
    }); 
    }   
    

    });