HTML - Element: <dialog>
Der <dialog>-Tag stellt ein Dialogfeld oder eine andere interaktive Komponente dar.
Funktioniert ab Mozilla Firefox 98 sowie auf allen Chromium basierten Browsern.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
<!DOCTYPE html> <html> <head> <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> var dialog = document.querySelector('dialog'); document.querySelector('#show').onclick = function() { dialog.show(); }; document.querySelector('#close').onclick = function() { dialog.close(); }; </script> </body> </html>
Das Element mit CSS anpassen
<!DOCTYPE html> <html> <head> <title>Dialog-Element</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <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%; } } </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> var dialog = document.querySelector('dialog'); document.querySelector('#show').onclick = function() { dialog.show(); }; document.querySelector('#close').onclick = function() { dialog.close(); }; </script> </body> </html>
Attribute
Mit den 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.
<figure> Abbildung
CSS - Bild vergrößern mit dem „Checkbox Hack”
PHP - Zufälliges Wort ausgeben und Konsonanten zählen
MySQL - Einfügen oder aktualisieren mit 'ON DUPLICATE KEY UPDATE'