2x bewertet

PopUp-Fenster erstellen

von neontrauma  |  08.08.2007 um 10:09 h
Layout
Typ: Layout
Stufe:Einfach Mittelmäßig
Da in der Wishlist ja darum gebeten wurde, hier einmal ein Tutorial zum Thema PopUps.

PopUps nennt man jene kleinen Fensterchen, die sich zum Beispiel bei Klick auf einen bestimmten Link öffnen. Eine andere Version davon sind zum Beispiel die allseits beliebten Werbe-PopUps.

Wie ihr nun ein solches PopUp-Fenster erstellt, um beispielsweise eure Website in ihm erscheinen zu lassen, zeige ich euch hier.

Ihr benötigt eine HTML-Seite, die "ganz normal" im Browserfenster geladen wird. Auf der fügt ihr dann einen Link ein - den Code fidnet ihr weiter unten - , der dann das PopUp öffnet. Im Link könnt ihr die Eigenschaften des PopUps festlegen: wie groß soll es sein, darf es Scrollbalken aufweisen, soll man es vergrößern und verkleinern dürfen, usw.

Der Code:

<a href="#" onClick="crush=window.open('DIEPOPUPSEITE.html', 'popup', 'scrollbars=auto,resizable=no,width=XXXpx,height=XXXpx'); return false;">DERLINK</a>

Anstelle von DIEPOPUPSEITE.html tragt ihr die URL zu der Seite ein, die im PopUp geladen werden soll. Dies ist eine ganz normal gecodete HTML-Seite.

scrollbars=auto legt fest, dass bei Bedarf - je nach Länge des Inhalts - Scrollbalken angezeigt werden. Soll das Scrollen generell unterdrückt werden, wählst du statt auto den Wert 'no', entsprechend werden bei 'yes' immer Scrollbalken angezeigt.

resizable=no verhindert, dass der Besucher die Größe des PopUps über das Ziehen mit dem Mauszeiger frei verändern kann.

Bei width und height tragt ihr die Pixelangaben zu Breite und Höhe des Fensters ein.

Schließlich gebt ihr bei DERLINK noch den Linknamen ein, über den das PopUp geöffnet werden soll - beispielsweise "Enter" oder sowas. Hier könnt ihr auch ein Bild einsetzen.

... viel Spaß damit, bei Fragen: anne@eden-existiert.de



5 Kommentare




Yukii

Danke, danke, danke für das Tut ! *schmatzer geb* xPPP
am 10.09.2007 um 12:04 Uhr


Nobi

Tolle weiß es zwar schon ist aber echt gut erklärt
am 19.10.2007 um 09:39 Uhr


Yaka

ich hab ne frage zu Width und height!

bei mir wird das nur von der linken seite immer schmaller und von unten her imer kleiner!!

nicht von beiden sieten!?! wieso Smilie
am 01.09.2008 um 22:32 Uhr


Sehr Hilfreich.Vielen Dank Smilie
am 06.10.2008 um 02:15 Uhr


Miss_Jennii

<a href="#" onClick="MyWindow=window.open(′http://...′,′MyWindow′,′toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=250,height=407′); return false;">LINKTEXT</a>

Ich hab den code jz von ner andren homepage, was heißen die ganzen anderen funktionen?
am 07.02.2010 um 18:02 Uhr