showModal() vs alert()
Auch wenn alert() heute nur noch selten eingesetzt wird, hat alert("Hallo Welt") einen Sonderstatus: Nichts ist so einfach ins Browserfenster zu setzen.
Der Text im alert() ist ein JavaScript String, und wenn JavaScript nicht ausgeführt wird, bleibt die Ausgabe im Verborgenen. Das HTML-Element dialog vereinfacht den Einsatz eines modalen Fensters durch einen Overlay und beläßt den Inhalt im DOM.
<button id="showModal">Zeig her</button> <dialog id="simpleModal"> <header>HTML dialog und showModal</header> <p>Das dialog-Element braucht …</p> <button class="closeModal">Schließen</button> </dialog>
const showModal = document.querySelector("#showModal");
const simpleModal = document.querySelector("#simpleModal");
showModal.addEventListener ("click", () => {
simpleModal.showModal();
document.querySelector(".closeModal").onclick = function () {
simpleModal.close();
}
});
showModal() ist eine Methode des dialog-Elements, die den Inhalt des dialog-Elements über den Inhalt der Seite setzt und jegliche Interaktion mit anderen Elementen der Seite blockiert.
Anders als das modale Dialogfenster mit alert() ist der angezeigte Inhalt HTML und kann mit CSS in Form gebracht werden.
show() dialog-Elemente ohne Blockade
Mit der Methode show() des dialog-Elements wird ebenfalls eine modale Box auf der horizontalen und vertikalen Mitte des Browserfensters angezeigt, die aber die interaktiven Inhalte der Seite nicht blockiert. Dialogboxen, die mit show() eingesetzt werden, scrollen mit, wenn der Benutzer die Seite scrollt.
