Tag HTML <dialog>

Le tag <dialog> est utilisé pour créer une boîte de dialogue native, en utilisant le mode utilisateur, effectuer des actions de base. Par exemple, en utilisant cet élément, vous pouvez créer des messages ou des formulaires en incrustation (pop-up). Par défaut, la boîte de dialogue est masquée et activée par l'attribut open.

Syntaxe

Le tag <dialog> est apparié; le contenu est placé entre le tag ouvrant (<dialog>) et le tag fermant (</dialog>).

Pour afficher/masquer le contenu, on a besoin de Javascript API.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      dialog {
        width: 40%;
      }
    </style>
  </head>
  <body>
    <div>
      <dialog id="DialogExample">
        <p>
          Voici quelque texte par exemple.
        </p>
        <button id="hide">Fermer la boîte de dialogue</button>
      </dialog>
      <button id="show">Afficher la boîte de dialogue</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>

Résultat

Attributs

Attribut Valeur Description
open open Indique que la boîte de dialogue est active et que l'utilisateur peut interagir avec elle.

Le tag <dialog> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <dialog> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <dialog>:

Coloration du texte dans le tag HTML <dialog>:

Styles de mise en page du texte pour la tag HTML <dialog>:

Autres propriétés utiles pour le tag HTML <dialog>:


Support de Navigateurs

37+ 59+ 6+ 24+


Trouvez-vous cela utile?

Articles Associées