Heute möchte ich euch eine Vorschau auf das "<dialog>" -Element von HTML5 geben. Bisher war es nicht möglich ohne Javascript Frameworks wie jQuery einfache Dialoge, außer die in die Jahre gekommenen alert- bzw. confirmboxen, zu erstellen. Das soll sich in HTML5 bald ändern. Wie es schon die nativen Elemente für die Navigation <nav>, Inhalt <article> und Footer <footer> gibt, ist das Element <dialog> für Dialoge geplant. Hier könnt ihr euch ein Überblick der neuen Elemente von HTML5 verschaffen. Bisher ist das <dialog> -Element leider nur experimentell und funktioniert nur mit den aktuellsten Browsern von Chrome und Safari.
Das <dialog> Element
Schauen wir uns an, wie wir das <dialog> Element verwenden. Zunächst erst einmal die simpelste Form. Der Dialog bleibt verborgen, weil es nicht die Eigenschaft "open" besitzt.
<dialog> Ich bin ein Dialog <button id="close">schließen</button> </dialog> <button id="show">Dialog öffnen</button>
.show() und .close()
Mit dem Aufruf der .show() oder .close() Funktion kann man den Dialog anzeigen bzw. wieder verbergen.
var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
dialog.show();
};
document.querySelector('#close').onclick = function() {
dialog.close();
};
Dialog ein Styling verpassen
Zugegebenermaßen sieht der Standard-Dialog eher langweilig als hochmodern aus. Geben wir den Dialog ein wenig Style. Als Selektor nehmen wie den Elementnamen "dialog".
dialog {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 6px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
Mit .showModal() einen modalen Dialog erzeugen
Anstelle von .show() kann man auch die Funkiton .showModal() aufrufen. So erhält man einen modalen Dialog.
var show = document.querySelector('#show');
show.addEventListener('click', function() {
dialog.showModal();
});
Das Overlay des modalen Dialogs stylen
Mit dem Pseudo-Element "::backdrop" lässt sich das modale Overlay stylen.
dialog::backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
}
Rückgabewert vom Dialog
Erzeugen wir einen Dialog mit einem Eingabefeld und übergeben den Wert als Parameter der .close() Funktion.
<dialog> <p>Ich bin ein Dialog</p> <input type="text" id="return_value" value="" placeholder="Geben Sie einen Text ein"> <button id="close">Absenden</button> </dialog> <button id="show">Dialog öffnen</button>
document.querySelector('#close').onclick = function() {
var value = document.querySelector('#return_value').value;
dialog.close(value);
};Die dialog.returnValue Eigenschaft gibt den Rückgabewert.
document.querySelector('dialog').addEventListener('close', function() {
alert(this.returnValue);
});
Dialog als Formular
Mit Hilfe von form[method="dialog"] lässt sich ein Formular in einem <dialog>-Element integrieren. Beim Schließen des Dialogs wird der jeweilige Rückgabewert des betätigten "submit"-Buttons in der Eigenschaft dialog.returnValue gespeichert. Darüber hinaus kann man das "autofocus"-Attribut benutzen um einen "submit"-Button vorauszuwählen.
<dialog id="dialog">
<form method="dialog">
<p>Akzeptieren Sie unsere AGB?</p>
<textarea disabled>Lorem ipsum dolor sit amet,....</textarea>
<button type="submit" value="yes">Ja</button>
<button type="submit" value="no" autofocus>Nein</button>
</form>
</dialog>var dialog = document.getElementById('dialog');
dialog.showModal();
dialog.addEventListener('close', function (event) {
if (dialog.returnValue == 'yes') {
// ...
} else {
// ...
}
});
Fazit
Ich bin positiv überrascht, wie einfach es ist, mit nativen Dialogen in HTML5 zu arbeiten. HTML5 erleichtert wieder einmal den Umgang mit Benutzereingaben wie die clientseitige Validierung von Formulardaten wie z.B. der E-Mail Adresse. Bleibt zu hoffen, dass die großen Browser Internet Explorer und Firefox mit der Funktion nachziehen.