X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML-Tag <dialog>

Das Tag <dialog> wird für ein Dialogfenster oder Fenster verwendet. Zum Beispiel kann man mithilfe dieses Elements Pop-up-Nachrichte oder Formen erstellen. Voreingestellt wird das Dialogfenster nicht angezeigt, es wird mithilfe des Attributs open geöffnet.

Syntax

Das Tag <dialog> wird gepaart verwendet, sein Inhalt befindet sich zwischen den Start- (<dialog>) und Endtags (</dialog>).

Um den Inhalt des Tages anzuzeigen/auszublenden ist Javascript API notwendig.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
        dialog{width:40%;} 
      </style>
   </head>
   <body>
        
    <div>
	 <dialog id="DialogExample">
            <p>
               Es ist irgendein Text.
            </p>
            <button id="hide">Dialogtext schließen</button>
          </dialog>

          <button id="show">Dialogtext anzeigen</button>
    </div>  

    <script type="text/JavaScript">
        (function() {  
               var dialog = document.getElementById('DialogExample');  
               document.getElementById('show').onclick = function() { dialog.show();  
           };  
             document.getElementById('hide').onclick = function() { dialog.close();  
          };  
        })(); 
    </script>
   </body>
</html>

Ergebnis

Attribute

Attribut Wert Beschreibung
open open Es zeigt, dass der Dialogfenster aktiv ist und der Benutzer kann mit ihm zusammenwirken.

The <dialog> unterschtützt Globale Attribute und Globale Eventhandler.


Browser-Support

37+ 59+ 6+ 24+


Finden Sie das nützlich?

Ähnliche Artikel