PopUp-Fenster erstellen
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