Geek asks and answers

The jQuery dialog should only open once for each user

I use jquery ui modal dialog on the first page, and I would like to show it only for each 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! Thank!

+3
source share
2 answers

Use cookies(as mentioned earlier) or localStorageAPI (depending on which browsers you should support).

How to use 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=/";
                }
            }
        });
    }
});

Method 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 );
                }
            }
        });
    }
});
+8
source

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

cookie: jquery cookie html i.e https://code.google.com/p/cookies/downloads/list

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

cookie $.cookie('page_visited','yes', expiration_date)

+1

More articles:


All Articles