EXPLORER LES ÉLÉMENTS HTML :

DÉMO

Introduction

L'élément de dialogue est largement pris en charge par tous les navigateurs depuis un certain temps maintenant, et je suis ici pour vous montrer comment cet élément peut grandement améliorer la productivité et la qualité de votre code, quel que soit le framework que vous utilisez.

J'utilise du JavaScript simple pour démontrer que vous n'avez pas besoin de beaucoup de lignes de code pour créer des composants simples et beaux.
Utiliser cet élément est assez simple :

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

Comme vous pouvez le voir ci-dessus, il vous suffit de prendre la référence de l'élément de dialogue et d'appeler une de ces deux fonctions :

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

Mais vous vous demandez peut-être :

Quelle est la différence entre ces deux fonctions ?

Eh bien, pour comprendre cela, nous devons comprendre un peu les couches et ce qu'est la couche supérieure.

Calques

Permettez-moi de vous donner un exemple de quelque chose que vous avez peut-être déjà rencontré lors de l'utilisation d'un composant de tiroir. Vous appelez le composant normalement dans votre code HTML et il finit par ne pas s'ouvrir sur tout l'écran, uniquement dans le contexte dans lequel vous l'avez placé. Vous finissez donc par devoir placer votre tiroir dans index.html pour qu'il s'ouvre dans toute la fenêtre ou se remplisse. votre CSS avec position et z-index pour créer un contexte qui se chevauche.

En utilisant des calques, vous pouvez rendre cela plus facile, mais vous finissez également par polluer un peu votre document CSS. En utilisant showModal(), il ouvre déjà l'élément de dialogue dans cette couche supérieure avec un contexte séparé sans aucune configuration requise. Si vous utilisez show(), cela n'appelle pas la boîte de dialogue dans cette couche supérieure et vous pouvez avoir le comportement normal de la fenêtre.

Le calque supérieur est un « calque » qui s’étend sur toute la fenêtre d’affichage et recouvre tous les calques créés par vous ou votre navigateur Web. Cela aide beaucoup et évite le fameux perçage excessif des hélices.

D'accord, d'accord, mais comment styliser cet élément ? Ça doit être très difficile !

Pas du tout ! C'est aussi simple que centrer un div... Peut-être un peu plus !

Dialogue / Modaux

Pour une stylisation plus approfondie, je vous recommande de voir cette vidéo de Kevin Powell.

Pour styliser la boîte de dialogue, c'est simple, il suffit de mettre l'identifiant/la classe dans l'élément et d'utiliser CSS.

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

Comme vous pouvez le voir ci-dessus, j'ai utilisé #dialog[open] pour modifier le positionnement des éléments. Lorsque vous créez une boîte de dialogue, l'affichage est désactivé par défaut.

Cet attribut n'est ajouté que lorsque vous appelez l'une des deux fonctions.
Ainsi, lorsque vous stylisez un élément de dialogue, essayez toujours d'utiliser le nom de votre classe/identifiant et l'attribut pour éviter les problèmes d'affichage.
Et comme vous pouvez le voir ci-dessus, la boîte de dialogue est déjà livrée avec un effet ::backdrop et il est également très simple de le modifier.

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

Spectacle ! Super facile ! Mais comment fermer ce modal ? Quand je clique sur le fond, rien ne se passe !

C'est parti ! Par défaut, l'élément ne propose pas cette possibilité. Si vous souhaitez fermer le modal, vous devez appeler la fonction pour le fermer à l'aide d'un bouton interne ou quelque chose comme ça.

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

Mais si vous souhaitez reproduire cet effet de fermeture en cliquant à l'extérieur, vous pouvez utiliser une fonction simple pour identifier les bords de l'élément de dialogue afin de savoir si vous avez cliqué à l'extérieur ou non.

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

Le comportement ressemble à ceci :

Je vous recommande de consulter l'API Popover si c'est ce que vous souhaitez faire en permanence.

Mec, c'est moche ! Ma bibliothèque est déjà animée !

Ne vous inquiétez pas pour ça ! Ajoutons une simple animation de fondu entrant.

#dialog[open]::backdrop {
  background: rgba(255, 0, 0, 60%);
}

L'ajout de l'animation de fondu sortant est un peu plus difficile car vous n'avez aucun moyen d'identifier le moment où l'utilisateur va fermer le modal, nous devrons donc apporter une modification à notre fichier de script.

dialog.close();

Deux choses importantes ont été faites :

1. Un nouveau paramètre a été ajouté pour déterminer la durée de l'animation pour fermer le modal (après quelques recherches j'ai trouvé cette vidéo de Kevin Powell).

2. J'ai ajouté un attribut appelé fermeture lorsque l'utilisateur clique. Il est supprimé à l'aide du paramètre de temps mentionné ci-dessus.
   

/** @type {HTMLDialogElement} */
const dialog = document.getElementById('dialog');

/**
 * Adds a close behavior to clicking outside dialog element
 * @param {HTMLDialogElement} dialogRef - The refer to element Dialog.
 * @example
 * const dialog = document.querySelector('#dialog');
 * closeDialogClickingOutside(dialog)
 */
 const closeByClickingOutside = (dialogRef) => {
  dialogRef.addEventListener('click', (ev) => {
    if (
      ev.offsetX < 0 ||
      ev.offsetX > ev.target.offsetWidth ||
      ev.offsetY < 0 ||
      ev.offsetY > ev.target.offsetHeight
    ) {
      dialogRef.close();
    }
  });
};

closeByClickingOutside(dialog);

Et là nous avons notre boîte de dialogue entièrement animée sans aucune bibliothèque !

C'est sympa ! Mais comment as-tu réalisé un tiroir en utilisant cet élément ?

Eh bien, pour y parvenir, nous devons prendre les styles par défaut de l'élément de dialogue et les écraser...

Tiroir

Le tiroir s'ouvre au dessus du paravent sur toute la hauteur. Alors créons un nouvel élément de tiroir à partir de zéro.

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

Il est important de noter que pour régler le tiroir sur toute la hauteur de l'écran, vous devez écraser la hauteur maximale par défaut de la boîte de dialogue !

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

Maintenant, c'est simple : ajoutez simplement les animations en utilisant la même fonction que vous avez créée dans la boîte de dialogue étape par étape et le tour est joué !

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

#dialog[open]::backdrop {
  background: rgba(255, 0, 0, 60%);
}

<dialogue>



<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173086397449699.jpg" class="lazy" alt="EXPLORING HTML ELEMENTS: <DIALOG>"></p>

<h2>
  
  
  Merci d'avoir lu
</h2>

<p>C'est mon premier message ici, alors merci d'avoir lu et si j'ai aidé de quelque manière que ce soit, je vous recommande de me suivre sur linkedin, ma langue maternelle est le portugais, donc la plupart de mes messages sont en portugais mais j'essaie de publier quelque chose. en anglais aussi. J'ai l'intention de publier des choses similaires à partir de maintenant, si vous avez des recommandations sur la façon d'améliorer cette stratégie modale et de tiroir, vous pouvez me les envoyer là-bas.</p>


          

            
        

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!