Modal
Vielen Dank, dass Sie diese Komponente zur Umsetzung eines Modals verwenden wollen. Inzwischen ist das native <dialog>
Element sehr gut unterstützt (
Verwendung von dialog
-Tag
Die Dokumentation des <dialog>
finden Sie open
, oder über die Funktionen show()
und showModal()
wird er sichtbar. open
und show()
öffnen das Element mit position: absolute
, während showModal()
position: fixed
setzt.
- Beide Varianten haben eine
max-width
, die unterbox-sizing: content-box
der gesamten Bildschirmbreite entspricht (bzw desposition
Elters) - Die Modalvariante hat einen Hintergrund, der eine sanfte Abdunklung verursacht (unser Tipp: die Opacity der Hintergrundfarbe erhöhen), der über
::backdrop
gestylt werden kann und Klickevents auf den Dialog weiterleitet. - Die Modalvariante ist in der Bildschirmmitte zentriert (via
margin: auto
, kann von CSS Resets überschrieben werden)
Modal
Mit Hilfe der Modal-Komponente können zusätzliche Informationen oder auch Eingabeformulare in einem Dialogfenster angezeigt werden. Ein offenes Modal kann via ESC geschlossen werden. Die Modal-Komponente ist standardmäßig versteckt. Sie wird i.d.R. erst nach Klick auf einen Button oder sonstigem Trigger angezeigt. Dabei wird der Hintergrund des Fensters deaktiviert und allein der Inhalt des Modal-Fensters ist aktiv.
Funktionsweise
Das Modal realisiert die Basis für barrierefreie Overlays und ermöglicht es beliebige HTML-Inhalte anzuzeigen. Beispielsweise wäre eine Dialog-Komponente eine Komposition aus einer Card-Komponente die in einer Modal-Komponente eingefügt wird.
Sobald ein Modal ge öffnet wird, werden alle selektierbaren Elemente in der Webseite deaktiviert, außer die innerhalb des aktiven Modals.
Konstruktion
Code
<kol-modal id="test-modal" _label="Beschreibung zur Modalbox">
<kol-card _heading="Vorgang löschen" _has-footer style="background-color: bisque">
<p slot="content">Wollen Sie den Vorgang wirklich löschen?</p>
<div slot="footer">
<kol-button className="close-modal" _label="Ok" _variant="primary"></kol-button>
<kol-button className="close-modal" _label="Abbrechen"></kol-button>
</div>
</kol-card>
</kol-modal>
<kol-button id="modal-open-button" _label="Modal öffnen"></kol-button>
<script>
const modal = document.querySelector('#test-modal');
const modalOpenButton = document.querySelector('#modal-open-button');
function openModal() {
modal._activeElement = modalOpenButton;
modal._open = true;
}
function closeModal() {
modal._activeElement = null;
}
document.querySelectorAll('.close-modal').forEach((b) => (b._on = { onClick: closeModal }));
modalOpenButton._on = { onClick: openModal };
</script>