Lerne Coding
HTML, das neue Element für Dialoge, Pop-ups und Modals
02.04.2022

HTML - das neue Dialog Element

Inhaltsverzeichnis
[[TABLE OF CONTENTS]]
access_timeGeschätzte Lesezeit ca. Minuten

Die Zeiten von selbsterstellten Modals, Pop-ups oder wie man sie es auch immer nennen mag, ist demnächst vorbei. Denn es gibt ein neues Element in HTML, das Dialog-Element.

Dieses Element ist nur dafür da, ein Fenster oberhalb der Webseite zu erstellen, ohne mit div's und sehr viel CSS Styling das realisieren zu müssen. Das schöne daran ist, dass es eigene JavaScript Methoden gibt, um diese Elemente dann zu schließen oder zu öffnen.

Alle relevanten Browser (Edge, Safari, Opera, Chrome, Firefox) und auch die mobilen Browser unterstützen diese neue Funktion.

Dialog element Verfügbarkeit Weltweit: 95.82%

Method of easily creating custom dialog boxes to display to the user with modal or non-modal options. Also includes a `::backdrop` pseudo-element for behind the element.

Internet Explorer nein
Microsoft Edge 79 +
Firefox 98 +
Google Chrome 37 +
Safari 15.4 +
Opera 24 +
iOS Safari 15.4 +
Opera Mini nein
Android Webview 122 +
Android Chrome 122 +
Android Firefox 123 +
Samsung Internet 4 +
Daten abgerufen von https:/­/­caniuse.com/­dialog

Um dieses HTML Element verwenden zu können, ist immer zwingende die Nutzung von JavaScript erforderlich, da das Element standardmäßig nicht sichtbar ist und erst aktiviert werden muss.

HTML Aufbau vom Dialog-Element

Der HTML Aufbau für ein Dialog-Element ist sehr einfach. Es braucht nur ein <dialog> Element, diese reicht bereits für die Darstellung aus.

Dann braucht es ein Selektor um an das Dialog-Element zu kommen, um es mit JavaScript öffnen und schließen zu können.

<dialog id="dialog-1">
    <p>
    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet.
    </p>

    <div>
        <button class="checked">Einverstanden</button>
        <button class="disable">Deaktivieren</button>
    </div>
</dialog>

JavaScript Methoden vom Dialog-Element

Jedes Dialog-Element hat einige neue Methoden, Eigenschaften und Events, die zur Interaktion mit einem Dialog Element genutzt werden können. Es kann ein returnValue gesetzt werden. Natürlich gibt es auch Events für den Abbruch und das Schließen der Dialog-Box.

JavaScript Methoden, Eigenschaften, Events

.showModal()

Methode, um das Dialog-Element zu öffnen, das die gesamte Seite überlagert.

.show()

Methode, um das Dialog-Element im HTML Kontext zu öffnen, bedeutet es wird nicht hervorgehoben. Die Interaktion mit anderen Elementen ist problemlos möglich.

.close()

Methode, um das Dialog-Element zu schließen.

.open

Gibt ein True oder False Wert aus, ob das Element gerade offen oder geschlossen ist.

.returnValue

Dort kann ein Value angegeben werden, dass im Dialog-Element gespeichert wird, um anschließend zum Beispiel beim Close Event auf den Wert wieder zuzugreifen.

close Event

Ein EventListener kann darauf hören, ob das Dialog-Element geschlossen wurde.

cancel Event

Diese kann zum Beispiel durch das Schließen mit der ESC-Taste ausgelöst werden.

Tipps zum Styling des Dialog-Elements

Das Dialog-Element hat im geöffneten Zustand ein Attribut, ⁣ das open heißt, kann auch im CSS Styling verwendet werden.

Der Selektor :backdrop kann verwendet werden, um den Hintergrund des Dialogs zu stylen. Allerdings ist diese Eigenschaft im Firefox zurzeit noch nicht unterstützt, alle anderen Browser haben damit keine Schwierigkeiten, hier würde es sich dann anbieten im Firefox mit einem Fallback zu arbeiten.

Live-Beispiel

Abschließend habe ich noch mal ein ausführlicheres Live-Beispiel vorbereitet, das zum Testen gerne verwendet werden kann.

*{
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  line-height: 1.5em;
}



p{
  padding: 1rem 0;
}

button{
  cursor: pointer;
  border: none;
  background: #292929;
  color: #fff;
  padding: 0.8rem;
  border-radius: 0.4rem;
  transition: all 0.5s;
}

button:hover{
  background: #a3a3a3;
  color: black;
}

dialog[open]{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto 6rem;
  border: none;
  border-radius: 0.6rem;
}

dialog[open] p{
  padding: 2rem;
}

dialog[open] div{
  display: flex;
  justify-content: center;
  width: 100%;
}

dialog[open] button{
  margin: 0 1rem 1rem;
}

dialog[open]::backdrop{
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
}
<h1>Dialog Element Example - <span id="result">Deaktiviert</span></h1>

<p>
  Lorem ipsum dolor sit amet, <strong>consetetur</strong> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
  dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
  clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
  consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
  diam voluptua. <em>At vero eos et accusam et justo duo dolores et ea rebum.</em> Stet clita kasd gubergren, no sea
  takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
  diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
  accusam et <strong>justo duo dolores et ea rebum</strong>. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
  dolor sit amet.</p>

<button id="action">Show more Informations</button>

<p>
  Duis autem vel eum iriure dolor in <strong>hendrerit</strong> in vulputate velit esse molestie consequat, vel illum dolore eu
  feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
  delenit augue <em>duis dolore te feugait nulla facilisi</em>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
  sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>
  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
  commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
  illum dolore eu feugiat <strong>nulla facilisis at vero eros et accumsan </strong> et iusto odio dignissim qui blandit praesent
  luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>

<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
  possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
  ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
  feugiat nulla facilisis.
</p>

<dialog id="dialog-1">
  <p>
    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet.
  </p>

  <div>
    <button class="checked">Einverstanden</button>
    <button class="disable">Deaktivieren</button>
  </div>
</dialog>
let dialogElement = document.getElementById('dialog-1');

if(dialogElement){

  console.log(document.getElementById('action'));

  document.getElementById('action').addEventListener('click',e => {
    dialogElement.showModal();
  });

  let checked = dialogElement.getElementsByClassName('checked');
  let disable = dialogElement.getElementsByClassName('disable');

  for(let button of checked){
    button.addEventListener('click',checkedFn);
  }

  for(let button of disable){
    button.addEventListener('click',disableFn);
  }

}

function checkedFn(e){
  dialog = this.closest('dialog');
  dialog.close();
  dialog.returnValue = "Aktiviert";
}

function disableFn(e){
  dialog = this.closest('dialog');
  dialog.close();
  dialog.returnValue = "Deaktiviert";
}

dialogElement.addEventListener('close',e => {
  document.getElementById('result').innerText = e.target.returnValue;
})

dialogElement.addEventListener('cancel',e => {
  console.log('cancel');
})

Zusammenfassung

Ein Element für Modals / Pop-ups hat schon lange gefehlt und ist eine längst überfälliges Element um schnell eigene Pop-ups für kleinere Anwendungen zu erstellen. Gerade, wenn es um JavaScript Frameworks wie Angular, Vue, Svelt oder React geht, wird dieses Dialog-Element sicherlich nichts Revolutionäres ausrichten können. Es hat gerade bei reduzierten Webseiten seinen Vorteil, schnell solche Elemente nativ darstellen zu können.

Bildquelle - Vielen Dank an die Ersteller:innen für dieses Bild
Kommentare zum Artikel

Es sind noch keine Kommentare vorhanden? Sei der/die Erste und verfasse einen Kommentar zum Artikel "HTML, das neue Element für Dialoge, Pop-ups und Modals"!

Kommentar schreiben

Vom Autor Empfohlen
close