 PopUp automatisch schließen + Zeitanzeige
Über eine Zeitsteuerung können Sie ein geöffnetes PopUp-Window automatisch schließen lassen. Als Erweiterung des BasisScripts wird hier im geöffteten Window die verbleibende Zeit dynamisch angezeigt und heruntergezählt.
|
|
PopUp-Window zeitgesteuert schließen + dynamische Zeitanzeige
UPDATE 27.04.2010, dynamische Anzeige mit getElementById("xxx").firstChild.data
Wenn ein aufgerufenes PopUp-Window nach eingestellter Zeit automatisch geschlossen und außerdem die Restzeit dynamisch angezeigt werden soll, ist dieses Script-Modul genau richtig. Die Vorgabe für die Wartezeit können Sie in Minuten + Sekunden festlegen.
 Demo für das PopUp-Window öffnen 
Aufwand
In der HTML-Datei, die im PopUp-Window angezeigt werden soll, muss im Head-Bereich mein Script-Code einkopiert werden. Im Body-Tag der gleichen Datei wird eine Anweisung zum Aufruf der AnzeigeFunktion notiert, damit beim Öffnen der Datei der Zähl- und Anzeigevorgang gleich eingeleitet wird.
In der HTML-Datei die im PopUp angezeigt werden soll:
- Script (siehe unten) in den Head-Bereich kopieren
- im Body-Tag die onLoad-Anweisung notieren
- im Body den <div>-Bereich für die Anzeige notieren
- Wartezeit festlegen
b) onLoad-Anweisung
Die onLoad-Anweisung (im Body-Tag der HTML-Datei des PopUps) ruft gleich beim Laden die Funktion zum automatischen Schließen auf und startet den CountDown:
<body onLoad="StartAnzeige()"
c) <div>-Bereich
In der HTML-Datei die im PopUp angezeigt werden soll steht im Body die Notierung für den <div>-Bereich, in dem die Anzeige für die noch verbleibende Zeit dynamisch erfolgt.
<div id="CountDownMeldung"> </div>
Das war's schon! Lassen sie sich von den langen Erklärungen hier nicht abschrecken und kopieren für einen ersten Versuch einfach den Code der Textdatei in ihre Seite. Sie können alternativ auch die ZIP-Datei herunterladen.
Die ZIP-Datei enthält zwei HTML-Dateien. Die erste Datei hat einen Link (und ein Script) zum Öffnen des PopUp-Windows. Die zweite Datei wird dann im geöffneten PopUp-Window angezeigt und hat eine Funktion zum automatischen Schließen.
Wenn Ihnen das als Einstieg ausreicht öffnen Sie die Quellcodeseite, kopieren den Code in Ihre Seite und experimentieren weiter.
d) Wartezeit
Im ScriptCode der Funktion zum automatischen Schließen finden sie die Variable 'Vorgabe' für die einzustellende Vorgabezeit (bis zum Schließen des PopUp-Windows). Ich habe (denke ich) den Eintrag komfortabel vorgesehen. Sie können den Vorgabewert in Minuten und Sekunden eintragen. Format M:SS
// Vorgabezeit bis zum Schließen
// M:SS - hier 20 Sekunden
var Vorgabe ="0:20"
Zur Anpassung folgende Änderungen:
| Element |
hier im Beispiel |
ersetzen mit |
| var Vorgabe |
"0:20" |
Wert in m:ss |
|
a) Script-Code
... im Head-Bereich der Datei, die im PopUp-Window angezeigt werden soll
<script type="text/javascript" language="JavaScript">
<!-- Begin
// W. jansen web-toolbox.net
// Vorgabezeit bis zum Schließen
// M:SS - hier 8 Sekunden
var Vorgabe ="0:08"
var Zeit ="";
function Minuten(wert) {
for (var i = 0; i < wert.length; i++)
if (wert.substring(i, i + 1) == ":")
break;
return (wert.substring(0, i));
}
function Sekunden(wert) {
for (var i = 0; i < wert.length; i++)
if (wert.substring(i, i + 1) == ":")
break;
return (wert.substring(i + 1, wert.length));
}
function StartAnzeige() {
min = 1 * Minuten(Vorgabe);
sec = 0 + Sekunden(Vorgabe);
NachrichtAnzeigen();
Down();
}
function Display(min, sec) {
var disp;
if (min <= 9) disp = " 0";
else disp = " ";
disp += min + ":";
if (sec <= 9) disp += "0" + sec;
else disp += sec;
return (disp);
}
function Down() {
sec--;
if (sec == -1) { sec = 59; min--; }
Zeit = Display(min, sec);
if (min == 0 && sec <= 0) {
window.close();
}
else down = setTimeout("Down()", 1000);
}
function NachrichtAnzeigen() {
Anzeige = "Fenster wird geschlossen in: " + Zeit + " s";
document.getElementById("CountDownMeldung").firstChild.data = Anzeige;
setTimeout("NachrichtAnzeigen()", 1000);
}
// End -->
</script>
Bitte beachten
Bei diesem Beispiel wird das Window mit dem Auto-Schließen-Befehl aus einer HTML-Seite heraus geöffnet. Nach dem Schleißen des PopUp-Windows wird also immer noch ein Browserfenster geöffnet sein und nicht das letzte Fenster (und damit der Browser) geschlossen werden.
Falls sie diesen JavaScript-Befehl testen und es sich dabei um das einzige geöffnete Fenster des Browsers handelt, erscheint bei den meisten Browsern ein Confirm-Dialog der noch einmal nachfragt ob das Fenster wirklich geschlossen werden soll, weil es sich um
das letzte zu schließende Browserfenster handelt.
Der Dialog wird vom Browser generiert und mir ist nicht bekannt wie er unterdrückt werden kann.
|
Home • PopUp-Windows • auto-close
DOWNLOAD