communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > 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 ?

寻∝梦
Libérer： 2018-08-15 17:41:23
original
4740 Les gens l'ont consulté

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

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>
Copier après la connexion

Conseils et notes :

Conseil : Chaque phrase du dialogue doit appartenir à

partie définie par l'étiquette. Veuillez consulter l'exemple ci-dessous.

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

La balise

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>
Copier après la connexion

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

Utilisez l'élément dialog :

est un élément HTML5 (5.1 pour être précis). Il est classé comme une "racine de tranche", similaire aux éléments ,
et
, 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
ou
- les deux sont valides, comme indiqué ci-dessous. 

<body>
      <div> 
            <dialog></dialog>
      </div> 
      <section> 
            <dialog></dialog> 
      </section>
            <dialog></dialog>
</body>
Copier après la connexion

Par défaut, les navigateurs pris en charge (Chrome 37+ et Opera 27+) afficheront l'élément

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(); 
  });
Copier après la connexion

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

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

[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!

Étiquettes associées：
HTML5 dialog的用法 HTML5 dialog实现模拟弹窗
source：php.cn
Article précédent：Comment utiliser la balise side en HTML5 ? Savez-vous comment utiliser la barre latérale HTML5aside ? Article suivant：Que signifie la balise d'en-tête en HTML5 ? Savez-vous comment utiliser la balise header en HTML5 ?
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Utiliser des grilles pour créer cette conception spécifique : un guide étape par étape J'essaie de créer une mise en page similaire à cette image, j'ai essayé d'utiliser cette g...
Depuis 2024-04-06 20:29:08
0
2
492
Sélectionnez les produits liés au woocommerce à l'aide d'une taxonomie personnalisée avec une hiérarchie à 3 niveaux J'ai une boutique woocommerce avec une classification personnalisée « Sports ». La classif...
Depuis 2024-04-06 20:05:30
0
1
544
Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3...
Depuis 2024-04-06 20:02:10
0
2
543
Calculer la somme des champs dans une autre table à l'aide d'une requête MySQL SQL J'ai un schéma comme celui-ci : Table utilisateur avec les attributs "user_id" e...
Depuis 2024-04-06 19:39:29
0
1
441
Quelles sont les meilleures pratiques pour afficher les informations de version dans les applications Web ? Je développe une application Web. Quelles sont les meilleures pratiques pour afficher les ...
Depuis 2024-04-06 19:13:16
0
2
476
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal