Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026
in Halle (Saale)
Beispiel:HTML-dialog-Element-3.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
dialog[open] {
width: 18em;
background: #fffbf0;
border: thin solid #e7c157;
margin: 5em auto; }
button {
padding: 0.5em 1em; font-size: 1em; background: #666; border: thin solid #333; color: white; cursor: pointer;
}
- close-dialog {
background: #c82f04;
}
[role=note] { border-left: medium solid #c82f04; padding-left: 0.5em; }
[role=note]:before { content: 'Beachte: ';
color: #c82f04; font-weight: blod; }
dialog, button {
border-radius: 0 .5em .5em; border: thin solid; padding: .5em; margin: .5em; }
</style>
<script>
</script>
<title>Popup-Boxen mit dialog - 3</title>
</head> <body>
Popup-Boxen mit dialog - 3
<button command="show-modal" commandfor="my-dialog">
Öffne Dialog-Box!
</button>
<dialog id="my-dialog" closedby="any">Ich bin eine Dialog-Box!
Du kannst mich mit ESC wieder schließen!
Auch ein light dismiss durch einen Klick außerhalb der dialog-Box ist möglich (Chrome Canary).</dialog>
Die (versteckte) Dialog-Box kann durch den Button geöffnet werden. Dieser hat zwei Attribute:
- Mit <a href="https://wiki.selfhtml.org/wiki/HTML/Attribute/command">
command="show-modal"</a> wird dialog.showModal() aufgerufen. - Mit <a href="https://wiki.selfhtml.org/wiki/HTML/Attribute/commandfor">
commandfor="my-dialog"</a> wird der Button der dialog-Box mit dieser id zugeordnet.
Das Schließen der Dialog-Box in diesem Beispiel funktioniert derzeit (Stand: April 2026) im Safari nur mit der Escape-Taste (also auf iPhone und iPad nicht)!
Es gibt einen Polyfill, der hier jedoch nicht verwendet wurde.
</body> </html>
