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;
 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>

Beispiel anzeigen

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.

<p> Textabsatz

CSS - Datum als Kalenderblatt darstellen

PHP - Doppelte Einträge im Array ausfiltern

JavaScript - Eingabefeld selektieren

MySQL - Datensatz mit den meisten Zeichen ermitteln