Es gibt in HTML die interaktiven Elemente:
siehe auch Wiki
Ein dialog Element ist eine Infobox oder Eingabebox, die über dem kompletten Inhalt der Seite eingeblendet werden kann. Der Rest der Seite kann mittels dem CSS Selektor ::backdrop mit einer (halbtransparenten) Hintergrundfarbe versehen werden. So ein Fenter nennt man dann Modal.
Das Öffnen und Schließen des Dialog- Fensters kann man mit Javascript oder mit CSS programmieren. Die CSS Methode führt dazu, dass das Dialog Fenster nicht wie ein Modal über der gesamten Seite plaziert wird.
Wenn ein Dialog Element mit dem alleinstehenden Attribut open versehen wurde, ist es beim Laden der Seite eingeblendet, ansonsten ausgeblendet.
<dialog open>Mein Dialog</dialog>
Im folgenden Beispiel wird ein Dialog mit Buttons ein- und ausgeblendet. Die Programmierung erfolgt mit Javascript. Die Javascript Befehle zum ein und ausblenden sind:
dialog.show();
dialog.showModal();
dialog.close();
Mittels showModal() verhält sich das Fenster wie ein Modal. Es liegt mittig über allen Elementen, und bedeckt den Rest der Seite mit einer (halbtransparenten) Farbe.
Man kann das erste dialog Element der Seite folgendermaßen ansprechen:
document.getElementsByTagName('dialog')[0]
Oder man man vergibt dem Element eine id <dialog id="myDialog"> und spricht es über die id an:
document.getElementById('myDialog')
Der Button zum Öffnen des Dialogs hat folgendes Javascript:
<button onClick="document.getElementsByTagName('dialog')[0].showModal()">Open</button>
Der Button zum Schließen ruft folgendes Javascript auf:
<button onClick="document.getElementsByTagName('dialog')[0].close()">Close</button>
Hier noch ein weiteres Javascript Beispiel
Siehe auch CSS Selektor ::backdrop und das Beispiel
Die Farbe des Hintergrundes kann man mit CSS folgendermaßen definieren:
dialog::backdrop {
background: rgba(0,0,0,0.6);
}
Im folgendem Beispiel wird das dialog Element mit CSS ein und ausgeblendet. Allerdings liegt hierbei das Dialog-Fenster nicht über dem Inhalt der Seite sondern im Textfluss. Es erscheint auch kein halbtransparenter Hintergrund, der die eigentliche Seite überdeckt. Man könnte zwar das Dialog- Element mit CSS absolut positionieren, aber das könnte man auch mit jedem anderen Element machen. Dafür braucht man kein Dialog Element.
details bietet eine anklickbare Infobox, wie man sie von Blogs kennt oder von aufklappbaren Navigationsmenüs.
Zuerst erscheint nur der Inhalt von summary mit einem Pfeil. Nach Anklicken erscheint der Rest von details.
Es ist die Überschrift für summary. Der Inhalt erscheint, wenn man darauf klickt.
Das im details enthaltene summary Element zeigt durch Anklicken, den gesamten Inhalt von details an.
<details> <summary> mehr lesen... </summary> Der eignetlich Inhalt von details. </details>