Zusammenspiel

CSS Anwendung

Pop Up, Pop down

Das Ganze

Nun geht's nur noch darum, die einzelnen Teile zu einem harmonischen Zusammenspiel zu führen.

Genau genommen haben wir das alles schon gemacht:

Wir haben ein oder sogar mehrere Pop-Ups im HTML-Code.
Jedes besteht aus einer <DIV> mit einer Id (einem eindeutigen Namen) und der CSS-Class popup.
Und jedes enthält als erstes eine weitere <DIV> der CSS-Class titelbalken mit einem <button>, der dazu dient, das Popup wieder zu schliessen, wenn man es nicht mehr sehen will.
Dieser Schliess-Knopf sieht etwa so aus:
<button type="button" onclick="document.getElementById('fensterlein').style.display = 'none'"> X </button>

Im Stylesheet zu unserer Seite sind die beiden CSS-Classes definiert:

.popup           { background-color: #F0F5FA ;
                   padding: 3px ;
                   border: 3px outset #DFE7EF ;
                   z-index: 2 ;
                   font-size: 80% ;
                 }
.titelbalken     { background: blue ; text-align: right ; margin-bottom: .5em }

Für jedes Popup braucht's noch eine weitere CSS-Angabe:
div#fensterlein{ position: absolute ; top: 1em ; right: 1em ; width: 30em }
Natürlich könnte auch die im Stylesheet stehen, aber wahrscheinlich ist es sinnvoller, sie im <head>-Bereich der Seite zu notieren, ausser es handle sich im ein Popup, das auf verschiedenen Seiten immer wieder zum Einsatz kommt.
Die Javascripts, die das Popup für die Bewegung an den Mauszeiger hängen, es verschieben und am ende auch wieder vom Mauszeiger lösen, sind in der Datei movebox.js, die im <head>-Bereich genannt wird:
<script type="text/javascript" src="movebox.js"></script>
Damit diese Javascripts sich für unsere Popups überhaupt zuständig fühlen, werden sie ganz zu Beginn der Seitenanzeige "registriert". So lange wir nur ein einziges Popup haben, geht das am einfachsten mit
<body onload="register_box('fensterlein',0)">
Wenn wir mehrere Popups auf einer Seite haben, lässt sich das folgendermassen erledigen:
1. <body onload="popups_initialisieren()">
2. Im <head>-Bereich einfügen:
```
<script type="text/javascript">
      function popups_realisieren() {
        register_box('fensterlein') ;
        register_box('noch_eines') ;
        register_box('popup3') ;
        register_box('usw') ;
      }
</script>
```

Das war's. Gut Popup denn auch!

ï»¿

Homepapa
August 2004

Vorheriger Abschnitt:
Schleife drum

NÃ¤chster Abschnitt:
Flatter, flatter

Inhalt

Service

CSS Anwendung

Pop Up, Pop down

Das Ganze