JQuery Popup Box - Start Box und Button Box schließen automatisch nach 10 Sekunden. Die Box vom unteren Textlink schließt nicht automatisch.

 

Diese Box habe ich am 20.06.2013 in NOF 2013 im Doctype “HTML5” eingebaut. Diese Box funktioniert in allen validen HTML-Ausgaben und in allen Browsern. Wenn Ihr eine Box nur einmalig, während einer Browser-Sitzung (SESSION) anzeigen wollt, dann guckt bitte auch hier.

Folgende jQuery-Verlinkungen müsst Ihr in den HTML <>Code Editor in den Bereich [customs4] der Seite einbauen (nicht “Zwischen Head Tags”) damit diese Skripte unter den Javscripts von NOF stehen, den Ihr unten links auf jeder Arbeitsseite findet. Sonst gibt es einen Konflikt mit den NOF-eigenen Javascript-Dateien.

Ich habe hier das Thema “smoothness” gewählt. Für die möglichen Farbschemata guckt bitte auf meiner alten Seite zu dieser jQuery-Dialog-Box.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Bitte verwendet eine valide HTML-Ausgabe wie z.B. den Doctype “LOOSE”, “XHTML” oder “HTML5”.

Zieht Euch ein Textfeld auf und fügt das Skript in die HTML des Textfeldes ein. Wo dieses Textfeld platziert wird ist dabei vollkommen egal.

> Textfeld aufziehen > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML” > Code in den HTML-Code Editor einfügen

Hier als Beispiel mein Skript zur Anzeige dieser Box:

<script>   
    $(function() {
     $( "#dialog-tommy" ).dialog({
      width: 450,
      height: 380,

      show: {
       effect: "blind",
       duration: 1000
      },
      hide: {
       effect: "explode",
       duration: 800
      },
     
open: function(event, ui){
       setTimeout("$('#dialog-tommy').dialog('close')",10000);
      }
     });
    });
</script>

<div id="dialog-tommy" title="NOF Tutorials von Tommy">
    <p align="center">
       <br><br>
       <font color='#0000FF'>
       Diese <b>Box</b> ist sehr einfach
       <br>
       einzubauen
       </font>
       <br>
       <font color='#FF0000'>
       Diese Box <i><b>schließt</b></i> nach 10 Sekunden automatisch
       </font>
       <br>
       <a href="http://www.nof-schule.de/forum/" target="_blank">Bei Fragen wendet Euch an <i>unser Forum</i></a>
       <br>
       <img src="./NOF-Hilfe-Tommy.png" title="Herzlich willkommen">
    </p>
</div>

Erlärungen zu meinem Skript oben:

  • zunächst hat jede Dialog-Box eine eigene ID - ich habe diese hier “dialog-tommy” genannt.
     
  • ich habe hier eine Breite von width: 450 und Höhe von height: 380 Pixeln für die Box angegeben. Ist der Inhalt größer als diese Angabe, entsteht ein Scrollbalken.
     
  • mit den Optionen show: und hide: habe ich hier die angegebenen Effekte zur Ein- und Ausblendung der Box definiert. Für die möglichen Effekte guckt bitte auf dieser Toggle-Seite von mir.
     
  • mit der Option open: setze ich ein Timeout auf die Box, sodass diese hier nach 10000 Millisekunden (10 Sekunden) automatisch schließt.
     
  • Bitte achtet darauf, dass jede Option mit einem Komma am Ende von der nächsten Option getrennt wird. Nach der letzten Option darf kein Komma mehr stehen. Ihr könnt also hier diese Optionen beliebig ändern oder auch ganz weglassen.
     
  • Der eigentlich DIV-Container zur Anzeige des Inhalts der Box muss dann die ID der Box erhalten
     
  • Bitte guckt für alle Optionen diese Seiten an:
     

Hier noch meine alternative Konfiguration der Box mit dem Button mit der (anderen) IDdialog-button”.

Diese Box öffnet nicht automatisch, da ich hier die Option autoOpen: false hinzugefügt habe und sie hat eine fixierte Position.

<script>   
    $(function() {
     $( "#dialog-button" ).dialog({
      width: 450,
      height: 450,
      autoOpen: false,
      show: {
       effect: "slide",
       duration: 1000
      },
      hide: {
       effect: "highlight",
       duration: 1000
      },
      dialogClass: "no-close",
      buttons: [{
       text: "Schließen",
       click: function() {
       $( this ).dialog( "close" );
       }
      }],
      create: function (event) {
       $(event.target).parent().css('position', 'fixed');
      },

      open: function(event, ui){
       setTimeout("$('#dialog-button').dialog('close')",10000);
      }
     });
     $( "#opener" ).click(function() {
      $( "#dialog-button" ).dialog( "open" );
     });

    });
</script>

Erklärungen zu meinem Skript oben:

  • hier habe ich noch die Funktion zum öffnen der Box mittels eines Buttons hinzugefügt, den Ihr wieder als Code in die HTML eines Textfeldes einfügt. Meinen DIV-Container mit dem Inhalt der Box, habe ich oben in der Ansicht mal weggelassen, da dieser identisch mit dem ersten Skript ist.

    <button id="opener">Andere Konfiguration & fixierte Box</button>

    dieser Button trägt somit die ID “#opener
     
  • Diese Box hat eine fixierte Position und folgt daher dem Scroll der Seite. Wenn Ihr das nicht wollt, dann entfernt den rot markierten Code.
     
  • Weiterhin habe ich mit einer zusätzlichen Style-Class, die ich in die HTML meiner Seite “Zwischen Head Tags” eingefügt habe, bei der Option buttons: die Anzeige des “close” Buttons unterbunden, da dieser ja nun durch den neuen Button “Schließen” ersetzt wurde.

<style type="text/css">
   .no-close .ui-dialog-titlebar-close {
      display: none;
   }
</style>

Viel Erfolg!



Diese Box ist sehr einfach
einzubauen

Diese Box schließt nach 10 Sekunden automatisch
Bei Fragen wendet Euch an unser Forum

 



Diese Box folgt dem Scroll
da sie eine fixierte Position hat

Diese Box schließt nach 10 Sekunden automatisch
Bei Fragen wendet Euch an unser Forum

 

 

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik