Maison > Article > interface Web > Qu'est-ce que la boîte de dialogue HTML5 ? Comment utiliser la boîte de dialogue en HTML5 pour simuler des fenêtres pop-up ?

Qu'est-ce que la boîte de dialogue HTML5 ? Comment utiliser la boîte de dialogue en HTML5 pour simuler des fenêtres pop-up ?

寻∝梦original: 2018-08-15 17:41:234682parcourir

Qu'est-ce que la boîte de dialogue HTML5 ? Comment utiliser la boîte de dialogue en HTML5 pour simuler des fenêtres pop-up ? Cet article décrit principalement la définition et l'utilisation spécifique de la balise de dialogue en HTML5, et comment simuler des fenêtres contextuelles via la balise de dialogue en HTML5.

Définition et utilisation de la balise de dialogue HTML5 :

La balise a38fd2622755924ad24c0fc5f0b4d412 définit une boîte de dialogue, telle qu'une conversation.

Voici des exemples :

<dialog>
  <dt>老师</dt>
  <dd>1+1 等于？</dd>
  <dt>学生</dt>
  <dd>2</dd>
  <dt>老师</dt>
  <dd>答对了！</dd>
</dialog>

Conseils et notes :

Conseil : Chaque phrase du dialogue doit appartenir à 73de882deff7a050a357292d0a1fca94 partie définie par l'étiquette. Veuillez consulter l'exemple ci-dessous.

Définition de la balise et instructions d'utilisation :

La balise a38fd2622755924ad24c0fc5f0b4d412 définit une boîte de dialogue, une boîte de confirmation ou une fenêtre.

Voici un exemple :

<table border="1">
<tr>
  <th>January <dialog open>This is an open dialog window</dialog></th>
  <th>February</th>
  <th>March</th>
</tr>
<tr>
  <td>31</td>
  <td>28</td>
  <td>31</td>
</tr>
</table>

Attributs de la balise de dialogue HTML5 :

open : open spécifie que l'élément de dialogue est valide et que l'utilisateur peut interagir avec lui pour interagir.

Récemment, de nombreux processus sur le Web nécessitent le consentement complet de l'utilisateur avant de pouvoir être complétés. Par exemple, les utilisateurs devront peut-être supprimer un compte, modifier leur nom d'utilisateur ou confirmer une transaction monétaire.

Dans ce cas, l'expérience utilisateur courante (UX, User experience design) consiste à afficher une boîte de dialogue avec deux boutons. L’une consiste à annuler et l’autre à continuer. Pendant de nombreuses années, nous nous sommes appuyés sur les bibliothèques JavaScript pour obtenir cet effet, mais dans cet article, nous allons utiliser l'élément a38fd2622755924ad24c0fc5f0b4d412

Utilisez l'élément dialog :

a38fd2622755924ad24c0fc5f0b4d412 est un élément HTML5 (5.1 pour être précis). Il est classé comme une "racine de tranche", similaire aux éléments 6c04bd5ca3fcae76e30b72ad730ca86d, b8a712a75cab9a5aded02f74998372b4 et a5e9d42b316b6d06c62de0deffc36939, dont chacun crée une nouvelle zone de contenu indépendante que vous pouvez traiter comme un enfant du corps. un élément imbriqué tel que dc6dce4a544fdca2df29d5ac0ea9906b ou 2f8332c8dcfd5c7dec030a070bf652c3 - les deux sont valides, comme indiqué ci-dessous.

<body>
      <div> 
            <dialog></dialog>
      </div> 
      <section> 
            <dialog></dialog> 
      </section>
            <dialog></dialog>
</body>

Par défaut, les navigateurs pris en charge (Chrome 37+ et Opera 27+) afficheront l'élément a38fd2622755924ad24c0fc5f0b4d412 sous une forme masquée, et seules les méthodes JavaScript show() ou showModal() sont appelées. Pour l'afficher, appelez la méthode close() pour le masquer à nouveau. Normalement, nous exécuterions cette méthode sur un événement de clic, comme ceci :

var $accountDelete = $(&#39;#delete-account&#39;), 
      $accountDeleteDialog = $(&#39;#confirm-delete&#39;); 
  $accountDelete.on(&#39;click&#39;, function() { 
      $accountDeleteDialog[0].showModal(); 
  }); 
  $(&#39;#cancel&#39;).on(&#39;click&#39;, function() {
      $accountDeleteDialog[0].close(); 
  });

Style personnalisé :

Comme la plupart des autres éléments De même, les boîtes de dialogue peuvent facilement remplacer le style par défaut du navigateur. Ainsi, vous pouvez personnaliser son style. Par exemple, rendez les bordures de la boîte de dialogue plus fines, arrondissez les coins et ajoutez des effets d'ombre, etc.

De plus, lorsque l'élément a38fd2622755924ad24c0fc5f0b4d412 est affiché de manière modale (en utilisant la méthode ShowModal()), nous ajoutons un pseudo-élément ::backdrop supplémentaire. L'élément ::backdrop réside immédiatement sous la boîte de dialogue, couvrant l'intégralité de la fenêtre d'affichage et les autres éléments situés en dessous.

Prise en charge des navigateurs :

Actuellement, seuls Chrome et Safari 6 prennent en charge la balise a38fd2622755924ad24c0fc5f0b4d412

[Recommandations associées]

Quels sont les attributs de la balise HTML IMG ? Comprendre l'utilisation de la balise IMG

Qu'est-ce que le Web en HTML5 ? Quels sont les éléments du stockage Web ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html5 chrome safari html 切片事件伪元素 ux

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser la balise side en HTML5 ? Savez-vous comment utiliser la barre latérale HTML5aside ?Article suivant：Comment utiliser la balise side en HTML5 ? Savez-vous comment utiliser la barre latérale HTML5aside ?

Articles Liés

Voir plus