CSS ::backdrop & HTML dialog

Dieser Text liegt in einem Absatz direkt im body.

Desweiteren gibt es ein HTML dialog Element, welches erst erscheint, wenn man es mittels Javascript öffnet. Es ist zwar auch möglich das standalone Attribut open im dialog Element einzufügen, um es schon beim Aufruf der Seite sichtbar zu machen aber dann greift die Eigenschaft ::backdrop nicht, weil das Dialog Element nicht auf dem Toplayer liegt.

Mit dem Javascript Befehl .showModal() wird das dialog Element eingeblendet, auf den TopLayer gelegt und mittig auf der Seite plaziert.

<button onClick="document.getElementsByTagName('dialog')[0].showModal()">Open</button>

Mit dem Befehl .close() wird es wieder geschlossen.

Der Befehl .show() zeigt das dialog Element zwar an, aber es ist kein ::backdrop möglich.

Dieser Text liegt in einem Dialog Element. Man nennt so etwas auch Modal. Mit dem CSS Selektor und Pseudoelement ::backdrop kann man dem erzeugen Hintergrund, der über dem Dokument und unter dem Dialog Element liegt, CSS Eigenschaften zuweisen.

CSS:

    dialog::backdrop {

    background: rgba(0,0,0,0.6);
}

Das Dialog Element liegt sowohl vertikal als auch horizontal mittig, wenn man margin: auto zuweist.