HTML - Element: <dialog>
Der <dialog>-Tag stellt ein Dialogfeld oder eine andere interaktive Komponente dar.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dialog-Element</title>
</head>
<body>
<h1>Dialog-Element</h1>
<p>
Mit dieser Schaltfläche wird ein systemisches Dialogelement geöffnet.:
<button id="show">Öffne Dialogelement</button>
</p>
<dialog>
<p>Hier ist der Dialog mit Standardstilen!</p>
<p>Sie können die Stile ändern, wenn Sie möchten.</p>
<button id="close">Schließen</button>
</dialog>
<script>
let dialog = document.querySelector('dialog');
document.querySelector("#show").addEventListener("click", () => {
dialog.show();
});
document.querySelector('#close').addEventListener("click", () => {
dialog.close();
});</script>
</body>
</html>
Der Browser rendert den Dialog erst dann, wenn die JavaScript-Methode show() oder
showModal() verwendet wird,
um den Dialog anzuzeigen. Bei showModal() kann der Benutzer nicht mit dem Rest der Seite interagieren,
weil der Dialog eine Hintergrundabdeckung für den Seiteninhalt beinhaltet. Diese Hintergrundabdeckung können Sie mit
CSS: ::backdrop selbst gestalten (siehe folgendes Beispiel).
Beim Öffnen eines Modal-Dialogs setzt der Browser automatisch den Fokus auf das erste interaktive Element im
Dialog. Besser ist es aber im interaktiven Element (<input>, <select>, etc.) das Attribut: autofocus zu setzen.
Bei der Gestaltung des Dialog-Elements sollte darauf geachtet werden, dass dieses bereits
CSS-Angaben (vom Browser bereitgestellten Stilen) wie:
margin, padding und border enthält.
Das Element mit CSS anpassen
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dialog-Element</title>
<style>
dialog {
font-family: Verdana, Arial, Sans-Serif;
color: #FFD700;
border: Solid 1px #999999;
border-radius: 10px;
box-shadow: 0px 0px 6px 5px #D6D6D6;
background-image: linear-gradient(
130deg,#ff7a18,
#af002d 41.07%,
#319197 76.05%
);
background-size: 450% 450%;
animation: gradient 10s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
::backdrop {
background-image: linear-gradient(
45deg,
magenta,
rebeccapurple,
dodgerblue,
green
);
opacity: 0.75;
}
</style>
</head>
<body>
<h1>Dialog-Element</h1>
<p>
Mit dieser Schaltfläche wird ein systemisches Dialogelement geöffnet.:
<button id="show">Öffne Dialogelement</button>
</p>
<dialog>
<p>Hier ist der Dialog!</p>
<p>Die Stile wurden mit CSS angepasst.</p>
<button id="close">Schließen</button>
</dialog>
<script>
let dialog = document.querySelector('dialog');
document.querySelector("#show").addEventListener("click", () => {
dialog.showModal();
});
document.querySelector('#close').addEventListener("click", () => {
dialog.close();
});
</script>
</body>
</html>
Attribute
Mit dem Attribut: open kann das Dialog-Element geöffnet werden.
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<ul> Aufzählungsliste
CSS - Wasserzeicheneffekt - Hintergrundbild fixieren
PHP - Mit filter_input Zahlenwerte überprüfen
JavaScript - Text mit einem Link markieren
MySQL - Suchen unter Berücksichtigung von Groß- und Kleinschreibung