Jquery dialog should only open once per user

Question

I use jquery ui modal dialog on a front page and I'd like to show it only one per user. This is my code:

  <script>
  $(function() {
    $( "#dialog-message" ).dialog({
      modal: true,
      resizable: false,
      show: 'slide',
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });


  </script>



<div id="dialog-message" title="Attention">
  <p>Sample text here!</p>
</div>

Any help is much appreciated! Thanks!

Answer 1

Either use cookies (like mentioned before) or the localStorage API (depending on which browsers you have to support).

A way with cookies:

$(function() {
    if( document.cookie.indexOf( "runOnce" ) < 0 ) {
        $( "#dialog-message" ).dialog({
            modal: true,
            resizable: false,
            show: 'slide',
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                    document.cookie = "runOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
                }
            }
        });
    }
});

A way with localStorage:

$(function() {
    if( ! localStorage.getItem( "runOnce" ) ) {
        $( "#dialog-message" ).dialog({
            modal: true,
            resizable: false,
            show: 'slide',
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                    localStorage.setItem( "runOnce", true );
                }
            }
        });
    }
});

Answer 2

You have to check if a user has visited specific page or not. You can keep the status in session variable or cookie. Based on value you can display dialog box.

example using cookie: include jquery cookie in your html file i.e. https://code.google.com/p/cookies/downloads/list

following code will do your task

$(document).ready(function()
{
 $(function() {
        if ($.cookie('page_visited') != 'yes')
        {
            $( "#dialog-message" ).dialog({
              modal: true,
              resizable: false,
              show: 'slide',
              buttons: {
                Ok: function() {
                  $( this ).dialog( "close" );
                }
              }
            });
            $.cookie('page_visited','yes')
        }
});
});                 

You can set cookie expiration period as third parameter $.cookie('page_visited','yes', expiration_date)