Popups

Habe gerade bei Engelbert von seiner JavaScript-Frage gelesen. Da in 18 Kommentaren nicht eine wirklich brauchbare Antwort vorhanden war, wollte ich es ihm eigentlich schnell in seinen Kommentaren erklären. Allerdings könnte das a) noch für andere Leser interessant sein und b) kann ich, wenn ich das hier als Beitrag veröffentliche, auch schnell wieder darauf zugreifen, wenn jemand wieder eine ähnliche Frage hat.

Also, Engelbertchen, los geht’s.

(Alles fett geschriebene musst du durch deine Angaben ersetzen.)

Du musst in deine Templates irgendwo im Bereich zwischen <head> und </head> folgendes einbauen:

Damit hast du den Grundcode für JavaScript-Popups.

Wenn du dann ein Bild im Popup aufgehen lassen willst, solltest du praktischerweise erst einmal eine HTML-Datei anlegen, damit das alles besser aussieht.

Hier eine Vorlage:
<html>
<head>
<title>Titel des Bildes</title>
</head>
<body style=“margin:0;padding:0”>
<a href=“javascript:window.close()”><img src=”xxx.jpg” border=“0” alt=”Alt-Text” title=”Titel-Text” height=”100” width=”100” /></a>
</body>
</html>

Jetzt kannst du diese HTML-Seite in einem Popup aufrufen:

<a href=”xxx.html” onclick=“popup(’xxx.html’,’yyy’,‘width=100,height=100’);return false” target=“_blank”>Link-Text oder Vorschaubild</a>

Zur Erklärung:
xxx.html = Bild-URL (wenn in einem anderen Verzeichnis, dann mit Pfadangabe natürlich); die URL musst du zweimal eingeben (erkläre ich gleich, warum)
yyy = irgendein meist bedeutungsloser Name für das Popup (dient dazu, das Fenster via JavaScript wieder ansprechen zu können, kannst du aber auch leer lassen, also ’‘ schreiben)
width=100,height=100 sind die Größenangaben für das Popup (sollte genauso groß sein wie das Bild oder ein bisschen größer)

Der zweifache Aufruf von xxx.html lässt Benutzer, die JavaScript deaktiviert haben, das Bild wenigstens in einem neuen Fenster sehen, wenn schon nicht in einem Popup.

So, jetzt gehen deine Bilder in einem schönen Popup auf, welches sich mit einem Klick auf das Bild wieder schließen lässt.

Mittwoch, 04. Februar 2004, 23:07 Uhr
Abgelegt unter: Online

9 Kommentare

Murphy

Ich habe sowas schon öfter gesehen, und mir drängt sich immer eine Frage auf: Warum eine extra Funktion “popup”? Warum nicht direkt window.open?

05.02.2004, 00:52 — WEBSITE — DIREKT ANTWORTEN

Johannes

Weil der Browser dann eine weiße Seite mit einer obskuren Meldung darauf aufruft. Das Popup geht auf, aber der vorherige Inhalt verschwindet. Probiere es einfach mal aus.

05.02.2004, 01:11 — WEBSITE — DIREKT ANTWORTEN

Engelbert

Du, ich hab das mit nur einer Zeile Quelltext realisiert, ohne die Meldung zu erhalten. Wenn Du nämlich diese Zeile (hab sie gerade nicht zur Hand, kommt morgen) einfügst und den Link target blank machst, gibts die Meldung im dann aufgehenden Fenster nicht, wenn das geschlossen wird.

Wart mal bis heute im Laufe des Tages, wenn die neuen Bilder in meiner Fotogalerie online gehen ...

05.02.2004, 01:32 — WEBSITE — DIREKT ANTWORTEN

martin

Zum öffnen den Link mit
target=_blank
als Eigenschaften, wie von Engelbert beschrieben

Zum schließen:
[ a href=”[removed]parent.window.close()”]Dein Text[/a]

Das wars.
und hier kann man es in Praxis sehen:

http://de-roede-orm.de/pivot/entry.php?id=56

LG MArtin

05.02.2004, 04:44 — WEBSITE — DIREKT ANTWORTEN

Johannes

Ja, Martin, ganz tolle Sache, funktioniert auch einwandfrei in meinem Mozilla…
Wenn man schon so etwas macht, sollte man es wenigstens noch in anderen Browsern als dem IE testen.

05.02.2004, 10:26 — WEBSITE — DIREKT ANTWORTEN

Engelbert

Ich schaue nur, obs im IE geht ... den Aufwand, meine Seiten für alle gängigen Browser zu optimieren, mache ich nun doch nicht. Erstens hab ich keine Zeit dafür und zweitens sind auf meinen Seiten sowieso kaum Scripte zu finden.

Falls bei einem Browser der “schließen”-Link nicht funktioniert, dann gibts ja immer noch das Kreuz rechts oben ;).

05.02.2004, 10:31 — WEBSITE — DIREKT ANTWORTEN

martin

Ich hab Testweise auch einen Opera auf dem Computer, wenn da was nicht funktioniert, dann gehts meißt im Mozilla auch nicht..
nach schlechten Erfahrungen mit unserer traumlager-Seite achte ich schon darauf, daß meine Seiten weitgehend kompatibel sind

05.02.2004, 12:09 — WEBSITE — DIREKT ANTWORTEN