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. Es ist ein Modal welches über der Seite auf dem Top-Layer liegt. Kein anderes Element kann über diesem Z-Index liegen. 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. Mit dem Befehl show() liegt es zwar auch über der Seite aber die darunterliegende Seite ist ncht gesperrt.
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. Dazu gibt es mindestens 2 Möglichkeiten:
myDialog.showModal();document.getElementById('myDialog').showModal(); 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);
}
Dieser CSS Hintergrund lässt sich auch im folgendem popover einsetzen.
siehe weblog CSS und Beispiel bei Codepen
Das popover Attribut ist neben dem Dialog-Element eine weitere Möglichkeit Elemente auf den den Top-Layer oder den höchsten Z-Index zu legen. Es kann mehrfach eingesetzt werden und blockiert nicht den darunterliegenden Teil der Seite. Das Popover liegt in einer eigenen Ebene ganz oben und kann durch Positionierung auch der Elternelemente nicht beeinflusst werden. Standardmäßig kann nur ein Popover gleichzeitig gezeigt werden. Dieses schliesst sich bei Klick ausserhalb. später mehr
Das Element welches ein und ausgeblendet werden soll, bekommt eine Id und das Standalone Attribut popover.
Das Element welches das Element ein und aublendet bekommt das Attribut popovertarget mit dem Wert der Id des Elements, welches ein und ausgeblendet werden soll.
<button popovertarget="info">Text</button>
<div popover id="info">Lorem...</div>
Gibt man dem Atribut popover den Wert manual, kann man auch mehrere Fenster gleichzeitig einblenden. Das Fenter schließt sich wenn man erneut auf den Button klickt, aber nicht, wenn man außerhalb klickt.
<button popovertarget="info">Text</button>
<div popover="manual" id="info">Lorem...</div>
In diesem Beispiel befindet sich im Modal-Fenster ein Button, der das Fenster schließt. Das Fenster hat die id="info". Der Button hat den Code popoveraction="hide"
<div popover id="info"> <button popovertarget="info" popoveraction="hide">X</button> Lorem...</div>
Beachte auch die CSS Anweisung für den Hintergrund.
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>
Man kann in HTML5 eigene Attribute erzeugen. Das sind zwar keine interaktiven Elemente, aber man kann sie für Javascript nutzen.
Wenn man ein bestimmtes Attribut braucht, das es in HTML5 nicht gibt, kann man so ein data-dash Attribut erzeugen.
Es beginnt immer mit data. Dann folgt ein Bindestrich und ein selbst vergebener Name.
data-band, data-food.
In Javascript gibt es ein spezielle Methode, um auf so ein Datadash Attribut zuzugreifen:
document.getElementById("queen").dataset("band");
Attribute, die es schon gibt, sollte man nicht durch ein Datadash Attribut ersetzen.