Javascript showModal und show: Modale Dialogfenster

showModal() und show() erzeugen modale Fenster. Ein modales Fenster ist ein Fenster innerhalb des Browserfensters, dass sich über den Inhalt des Fensters legt. So ein Overlay oder Popup war immer ein kleines Kunststück, das jetzt mit dem HTML-Element dialog einfacher und flexibler ist.

Javascript showModal() und show()

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>
HTML dialog und showModal

Das dialog-Element braucht JavaScript, um seine Meldungen auszuspielen und um das modale Fenster wieder zu schließen.

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.

Suchen auf mediaevent.de