jQuery-UI Dialog nur einmal beim Öffnen einer Seite anzeigen

[Dada]

Die jQuery Dialog-Box hat sehr wahrscheinlich jeder schonmal gesehen oder zumindest davon gehört.

Paby hatte zum Einbau mal ein Tutorial geschrieben und das ganze die 2-Minuten-Newsbox genannt.

Leider wird bei dieser Lösung der Dialog immer angezeigt wenn die Seite geladen wird.

Ich möchte euch nun zeigen, wie man es hinbekommt, dass der Dialog nur einmal beim Öffnen der Seite angezeigt wird.
Hierzu wird ein Session-Cookie verwendet.
Ein Session-Cookie wird beim Schließen des Browsers wieder gelöscht.
Beim nächsten Besuch wird der Dialog wieder angezeigt.

Wir benötigen dafür jQuery, jQuery-UI und jquery.cookie.js, letztes könnt ihr bei GitHub herunterladen.

In die Headtags wird jQuery, das Cookie-Script sowie das Script und die CSS für jQuery UI eingebunden.

Code: HTML5

1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
2. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
3. <script src="jquery.cookie.js" type="text/javascript"></script>
4. <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" media="all" />
5.  

Der Pfad zur jquery.cookie.js müsst ihr natürlich anpasen.

An das Ende des Hauptextes kommt

Code: HTML5

1. <script type="text/javascript">

Code: Javascript

1. $(document).ready(function() {
2.     var $dialog = $('<div></div>')
3.         .html('<p>Ich habe einen 386er und einen 486er aus dem Fenster geschmissen</p><p>Der 486er war tatsächlich schneller!</p>')
4.         .dialog({
5.             autoOpen: false,
6.             title: 'Neuer Tesbericht'
7.         });
8.  
9.     if($.cookie('dialog_cookie') == null) {
10.         $dialog.dialog('open');
11.         $.cookie('dialog_cookie', 'DIALOG JA');}
12.    
13.     });

Code: HTML5

1.  </script>

Text und Titel müsst ihr anpassen, es sind sämtliche HTML-Befehle zugelassen.
Man kann z.B. ein IFrame in der Dialogbox anzeigen.