showModal() vs alert()
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.
Das HTML 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();
}
});
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.
