Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Wichtige Mitglieder-Information

Da immer noch Mails verwunderter "Mitglieder" bei mir ankommen, weil Login und Registrierung nicht funktionieren... das Forum ist seit geraumer Zeit geschlossen und steht ausschließlich als Nachschlagewerk zur Verfügung. Einerseits bin ich froh, diesen Schritt gewagt zu haben... auf der anderen Seite... wenn ich hier manchmal so lese... es war doch "'ne geile Zeit" mit euch! Macht's gut!

Beste Grüße nettesekel

* Friendship

DER Katzenblog – mit tollen Tipps und Ideen für deine Katze(n) <3

Die letzten Beiträge

Autor Thema: jQuery-UI Dialog nur einmal beim Öffnen einer Seite anzeigen  (Gelesen 1347 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
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="jquery.cookie.js" type="text/javascript"></script>
  2. <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" media="all" />
  3.  

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.

« Letzte Änderung: 20. Februar 2014, 20:33:33 von nettesekel »

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion