CSS Anwendung

Pop Up, Pop down

aufpolieren

In der <div> für unser Popup befindet sich

eine weitere <div>, die den <button> enthält
und natürlich der Text.

Es reicht, unseren <button> mit dem [X] in eine eigene <div> zu stellen, die ihn rechtsbündig anordnet und einen farbigen Hintergrund hat. Das sieht dann schon wie ein Titelbalken aus.

Mit der Abbildung rechts haben wir das schon mal gemacht, und falls du sie ausgeblendet haben solltest, kannst du sie wieder einblenden.

Bemerkungen für die Praxis:

Ich definiere die Eigenschaften der Popups und der Kopfleisten jeweils in CSS-Classen. In unserem Fall steht z.B. im Stylesheet
```
  .popup           { background-color: #F0F5FA ;
                     padding: 3px ;
                     border: 3px outset #DFE7EF ;
                     display: none ; z-index: 2 ;
                     font-size: 80% ;
                   }
  .titelbalken     { background: blue ;
                     text-align: right ;
                     margin-bottom: .5em
                   }
```
Ich kann auf diese Weise mehrere Popups auf einer Seite haben. Jedes einzelne beginnt mit
<div id=nameclass="popup"> <div class="titelbalken"> <buttonu.s.w.
So sehen sie alle gleich aus und die Differenzen (z.B. unterschiedliche Positionen) sind in den Definitionen für die jeweilige Id festgehalten.
Wir haben jetzt ausserordentlich wenig JavaScript verwendet: Lediglich die beiden Buttons zum Ein- und Ausblenden enthielten je eine Javascript-Anweisung; genau genommen sogar zweimal dieselbe Anweisung, lediglich einmal mit dem Wert block und einmal mit none für die Anzeige-Eigenschaft.
Dennoch: Wir haben gesehen, dass da HTML-Elemente sind, denen mit CSS gewisse Eigenschaften zugewiesen werden können, welche später mit JavaScript wieder verändert werden können — ein gutes Beispiel also für das Zusammenwirken der verschiedenen Zutaten und Techniken.
Damit könnten wir hier eigentlich aufhören. Ich biete aber trotzdem noch eine Fortsetzung an: Wie wär's denn, wenn wir unser Popup auch noch mit der Maus verschieben könnten, falls es gerade etwas zudeckt oder sonst an einem ungünstigen Platz steht? Sowas lässt sich tatsächlich machen, aber dazu braucht's nun wirklich etwas mehr JavaScript. Wir werden das nötige Programm dazu Schritt für Schritt entwickeln.

Ausprobieren: Hier sind die .

Homepapa
August 2004

Vorheriger Abschnitt:
weg damit

Nächster Abschnitt:
und es bewegt sich doch

Inhalt

Service

CSS Anwendung

Pop Up, Pop down

aufpolieren

Inhalt

Service

CSS Anwendung

Pop Up, Pop down

aufpolieren

Details