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>

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.

<figure> Abbildung

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

PHP - Zufälliges Wort ausgeben und Konsonanten zählen

JavaScript - Zwei Ziffern

MySQL - Einfügen oder aktualisieren mit 'ON DUPLICATE KEY UPDATE'

Externe Linkliste
Links zu anderen Webseiten sollten nach Möglichkeit zentral auf einer Seite geschrieben werden — Grund: Sollte ein externer Link einmal nicht mehr funktionieren (z.B., wenn die Webseite gelöscht wurde), so lässt sich das leichter überprüfen, als wenn die externen Links auf fünfzig (oder mehr) Seiten verteilt sind.