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.

<pre> Präformatierter Text

CSS - Die Schriftgröße je nach Fensterbreite automatisch anpassen

PHP - Lange Wörter mit Leerzeichen teilen

JavaScript - Seite autom. jede Minute neu laden

MySQL - Datensatz aktualisieren

Tote Links
Hyperlinks (Links), die auf eine nicht vorhandene Datei verweisen, heißen "tote Links". Klickt man darauf, erscheint eine Fehlermeldung. Solche toten Links machen einen unprofessionellen Eindruck. Es gibt aber Tools, die Webseiten auf tote Links überprüfen können.