NOF-Forum | Referenzen | Kontakt | Impressum | Sitemap
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:
Hier noch meine alternative Konfiguration der Box mit dem Button mit der (anderen) ID “dialog-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:
<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 ist sehr einfach
einzubauen
Diese Box schließt nicht automatisch
Bei Fragen wendet Euch an unser Forum