Beispiel:HTML-dialog-Element-3.html
Aus SELFHTML-Wiki
<!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>
<h1>Popup-Boxen mit dialog - 3</h1>
<button command="show-modal" commandfor="my-dialog">
Öffne Dialog-Box!
</button>
<dialog id="my-dialog" closedby="any">Ich bin eine Dialog-Box!<br>Du kannst mich mit <kbd>ESC</kbd> wieder schließen!<br>Auch ein <em>light dismiss</em> durch einen Klick außerhalb der dialog-Box ist möglich (Chrome Canary).</dialog>
<p>Die (versteckte) Dialog-Box kann durch den Button geöffnet werden. Dieser hat zwei Attribute:</p>
<ul>
<li>Mit <a href="https://wiki.selfhtml.org/wiki/HTML/Attribute/command"><code>command="show-modal"</code></a> wird dialog.showModal() aufgerufen.</li>
<li>Mit <a href="https://wiki.selfhtml.org/wiki/HTML/Attribute/commandfor"><code>commandfor="my-dialog"</code></a> wird der Button der dialog-Box mit dieser id zugeordnet.</li>
</ul>
<p role="note">
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)!<br>Es gibt einen Polyfill, der hier jedoch nicht verwendet wurde.
</p>
</body>
</html>
