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.

<base> Basis-URL

CSS - Glühende Neon Buchstaben

PHP - Parameter per URL übergeben

JavaScript - BBCode in einem Textarea einfügen

MySQL - Datensatz löschen

No Content
Oder auch Usability. Viele Webseiten glänzen mit einem großartigen Design aber „Ohne Inhalt“. Ein bischen Text, 5 Bilder, 4 Seiten Text, einige Witze und eine E-Mail-Adresse... das war es?! Wer nicht mehr zu bieten hat, bekommt auch nicht viele Besucher. Und platzieren Sie kein "billiges Zeug" oder inkorrekte Information. Enttäuschte Besucher sind kaum zurückzugewinnen. Auch das Aufführen von Links zu anderen Seiten macht noch keine interessante und damit sehenswerte Homepage aus. Verzichten Sie auch möglichst auf private Informationen aus Ihrem Leben (zum Beispiel Lebensläufe und tiefgründige Familienangelegenheiten). Mit solchen Themen locken Sie heute keinen "Hund hinter dem Sofa" mehr hervor. Eine kurze Info zum Ersteller oder vielleicht auch Webmaster inkl. E-Mail-Adresse reicht in der Regel vollkommen aus.
Im Netz gibt es viele nützliche oder interessante Angebote, um seine Homepage zu ergänzen beziehungsweise um sich von anderen Seiten zu unterscheiden. Dies sind zum Beispiel Content-Anbieter, Gästebücher, Newsletter, Newsticker, Foren und so weiter