PopUp in Javascript und CSS – Tutorial

20
Feb

popup

So gut wie auf jeder grösseren Seite findet man irgendwo PopUps, sei es um Werbung anzuzeigen oder um ein Bild vergrössert darzustellen. In diesem Tutorial will ich euch zeigen wie ihr ganz einfach ein PopUp in JavaScript erstellen könnt und anschliessend mit CSS designen könnt.

Voraussetzungen:

  • HTML Grundkentnisse
  • CSS Grundkentnisse

Lernziele:

  • JavaScript in HTML aufrufen
  • CSS Eigenschaften per JavaScript verändern

    Als erstes erstellt ihr ein leeres HTML Dokument:

    [cc lang="HTML"]

    PopUp mit Javascript und CSS
    [/cc]

    Nun fügt ihr folgenden Code in den <head> Bereich ein:

    [cc lang="CSS]

    –>
    [/cc]

    Hier definieren wir den Style unseres PopUps. Spielt ruhig ein bisschen damit rum und passt das PopUp euren Wünschen an.

    Wenn das PopUp am Anfang nicht erscheinen soll, fügt nun folgenden Code auch in dem <head> Bereich ein:

    [cc lang="JavaScript"]

    [/cc]

    Nun kommen wir zum eigentlichen Aufruf des PopUps. Dies soll über einen normalen Link geschehen. Mit der “onClick” Funktion, die immer dann aufgerufen wird, wenn der User auf den Link klickt, können wir nun das PopUp anzeigen oder auch verschwinden lassen.

    Fügt nun erstmal folgenden Code in den <body> Bereich ein:

    [cc lang="HTML"]

    Open PopUp

    [/cc]

    Wie ihr seht haben wir ein div-Element mit der ID “popup” erstellt. Dieses div-Element wird entweder angezeigt oder nicht angezeigt, je nachdem welchen Link der User klickt.

    Mit document.getElementById(‘popup’).style.display=’block’ können wir das PopUp anzeigen und mit document.getElementById(‘popup’).style.display=’none’ wieder verschwinden lassen.

    Hierkönnt ihr das PopUp testen.

    Eigentlich ist das alles ganz simpel, wenn man mal den Grundgedanken dahinter verstanden hat. Hier nochmal die kurze Zusammenfassung:

    1. CSS Style des PopUps wird definiert
    2. (optional) JavaScript macht PopUp “unsichtbar”
    3. Je nach dem auf welchen Link geklickt wird, wird das div-Element entweder angezeigt oder versteckt.

    Vielen Dank fürs Lesen und für Fragen und Kritik schreibt doch einfach in die Comments.

    Michael Ziörjen

    VN:F [1.0.8_357]
    Rating: 3.2/5 (10 votes cast)

    There is 1 comment in this article:

    1. 7/04/2010eigene homepage erstellen says:

      I studied the css tutorial and I really learned a lot. I think my next homepage will be a lot better than my first one.

    Write a comment: