template
In manchen Fällen ist es vom Bedienungsablauf her sinnvoller, ein Popup-Fenster zu erzeugen, anstatt eine neue Seite in den Browser zu laden; nämlich immer dann, wenn das aktuelle Fenster nicht aus den Augen verloren werden darf.
Beispiele für die Verwendung eines Popups wären:
- Anzeigen einer Information (z.B. Details zu einem Listeneintrag)
- Druckansicht-Fenster
- Download-Dialog
- Upload-Dialog
- Login-Formular
- Maske zum Anlegen/Bearbeiten eines Datensatzes
- Dialog zur Auswahl einer Eigenschaft o.ä. (aus einer Liste)
Die erforderlichen Javascript-Funktionen werden im HTML-Header der Seite notiert.
Hier wird das Dokument
myinfo.php in ein Popup der Größe 200 x 200 geladen:
function PopIt() {
window.open('myinfo.php', 'Info', 'width=200, height=200').focus();
}
Falls das Fenster mit dem Namen 'Info' bereits existiert, wird es als Container benutzt, ansonsten wird das Fenster 'Info' erzeugt.
Die Liste im 3. Parameter von window.open() kann bei Bedarf um weitere Eigenschaften ergänzt werden:
dependent=yes/no (Fenster bleibt auch ohne Focus im Vordergrund)
resizable=yes/no (Benutzer darf Fenstergröße ändern)
scrollbars=yes/no (Scrollbars einblenden, falls nötig)
Der Dateiname darf auch GET-Parameter besitzen.
Um die Info eines Benutzers mit einer bestimmten UserID anzuzeigen, könnte man folgende Funktion schreiben:
function UserInfo(uid) {
window.open('userinfo.php?uid='+uid, 'Userinfo', 'width=200, height=200').focus();
}
Um die Funktion aufzurufen, benutzt man im HTML-Code einen Link
<a href='javascript:UserInfo(14)'>Hans Meier</a><br>
<a href='javascript:UserInfo(23)'>Gerda Schmidt</a><br>
<a href='javascript:UserInfo(9)'>Willi Busch</a><br>
oder einen Button:
<button type='button' onClick='javascript:UserInfo(14)'>Hans Meier</button>
template |
 |