HTML - Element: <dialog>

Der <dialog>-Tag stellt ein Dialogfeld oder eine andere interaktive Komponente dar.

Funktioniert nicht im Browser Mozilla Firefox, siehe: https://caniuse.com/dialog oder
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>

Beispiel anzeigen

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;
 border: Solid 1px #999999;
 border-radius: 10px;
 box-shadow: 0px 0px 6px 5px #D6D6D6;
 background-color: #F7FBFF;
}
</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>

Beispiel anzeigen

Attribute

Mit den Attribut: open kann das Dialog-Element geöffnet werden.

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Bausteinen (Codeschnipsel) aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<dl> Definitionsliste

CSS - Bild vergrößern mit dem „Checkbox Hack”

PHP - Verzeichnis als eine Auswahlliste mit Anfangsbuchstaben ausgeben

JavaScript - Anzahl der markierten Checkboxen anzeigen

MySQL - Eintrag in der Tabelle löschen