 Button öffnet Popup-Window
Das Formular-Element 'Button' mit hinterlegten Eigenschaften. Während in einem Formular üblicherweise der Sende-Button soll den Versand der Formulardaten per Email auslöst, wird hier ein PopUp-Window geöffnet.
|
|
PopUp-Window mit einem Button öffnen
Hier dient ein Formular-Button als Klickfläche zum Öffnen eines Fensters. Dazu wird ein Klick auf den Button mit 'onClick' überwacht.
<form>
<input type=button value="click" onclick="javascript:openNewWin()">
</form>
Beim Anklicken wird die Funktion 'openNewWin()' aufgerufen.
Window-Eigenschaften
In der Function openNewWin() werden die Eigenschaften des PopUp-Windows als Attribute eingetragen. Zu den Eigenschaften gehören neben der im PopUp anzuzeigenden HTML-Datei vor allem die Breite und Höhe. Außerdem können sie unter Anderem Menüleisten erlauben / unterdrücken und Scroll-Eigenschaften bestimmen.
window.open('dateiname.htm','Text Titelbar',
'toolbar=0,location=0,directories=0,menubar=0,scrollbars=1,resizable=0,
width=500,
height=470');
Wichtig ist die Eintragung für den Dateinamen der HTML-Datei, die im Window angezeigt werden soll. Außerden sollten sie die Größe des PopUps bei width und height festlegen
Button mit CSS formatieren
 Mit CSS-Angaben können sie das (vom Browser bestimmte) Erscheinungsbild des Buttons selbst festlegen.
Ein Formular-Button, der nicht gleich als solcher zu erkennen ist:
<form>
<input class="Button04" type="button" value="Info anzeigen"
onclick="javascript:openNewWin()">
</form>
CSS-Anweisungen im Head:
<style type="text/css">
<!--
.Button04 {
cursor: hand;
font-size:11px;
border: 1px solid #8F8F8F;
background-color: #CCCCFF;
width:120px;
}
/* Farbänderung bei MouseOver nicht alle Browser */
.Button04:hover {
background: #99CCFF;
cursor: hand;
}
-->
</style>
Die Verküpfung der im Head-Bereich notierten Formatierungen erfolgt über das Attribut 'class' . Die CSS-Klasse muss dann im Input-Tag eingetragen werden:
<input type="button" class="Button04" ...
|
Home • Formulare • Formularbutton PopUp-Window
Quellcode