CSS2 Anwendung 
Homepapa-Logo

Inhalt

Einleitung Voraussetzungen Pop Up, Pop down gleich loslegen und gestalten vorknöpfen weg damit aufpolieren und es bewegt sich doch viel Arbeit! Fang die Maus! ja wo ist sie denn? Schiebung! packen wir's an und Tschüss Casting Schleife drum Das Ganze Flatter, flatter Vorhang auf! Klappe zu!

Service

Kontakt & Feedback

CSS Anwendung

Pop Up, Pop down

gleich loslegen

HTML-seitig ist die Sache recht einfach.

Beginnen wir mit unserem Popup-Fenster:

Wir schreiben schlicht und einfach den Text, den wir im Popup anzeigen wollen, in eine <div>.

Natürlich werden wir irgend einen Mechanismus liefern müssen, der das Fensterlein sichtbar macht. Unsere Vorbereitung besteht darin, dieser <div> eine eigene Id zu geben. Das Ganze platzieren wir ans Ende unseres HTML-Textes, direkt vor dem </body> Tag.
Das sieht dann etwa so aus:

   <div id="fensterlein">
     <h2>Details</h2>
     <p>Das hier ist der Text mit den Details.</p>
   </div>

Den Knopf, mit dem wir das Ganze einblenden, machen wir mit einem <button>-Element:

   Klicken Sie für <button type="button">Details</button>

Wenn du ein Beispiel brauchst, findest du es . Du kannst den HTML-Text speichern und weiter bearbeiten.

Damit sind die HTML-Bausteine schon mal gemacht. Unsere nächsten zwei Schritte sind nun:

  1. Das Popup-Fenster muss ein wenig gestaltet und als solches erkennbar werden. Ausserdem soll es ja zu Beginn gar nicht sichtbar sein. All dies erreichen wir mit etwas CSS.
  2. Unseren <button> müssen wir mit dem nötigen Mechanismus versehen, das Popup einzublenden.

Nehmen wir's eins ums andere.


Homepapa
August 2004
Vorheriger Abschnitt:
Pop Up, Pop down
Nächster Abschnitt:
und gestalten