Exemple de création d'une boîte modale en utilisant HTML5 et CSS3

Cet article présente un exemple d'utilisation de HTML5 et CSS3 pour créer une boîte modale et la partager avec tout le monde. Les détails sont les suivants :

Peut-être que vous ne souhaitez pas lire un tas d'instructions longues ci-dessous et souhaitez afficher directement le code source ou un exemple en ligne. Le lien ci-dessous est une boîte modale fonctionnelle que j'ai créée en utilisant la transition CSS3, l'opacité, l'événement de pointeur et d'autres attributs.

Vous pouvez cliquer dessus pour aller sur Github et voir le code source : ModalBox-Tutorial

Les composants frontaux sont pilotés par des scénarios commerciaux et d'interaction, et les boîtes modales ne font pas exception. Un scénario courant consiste à effectuer une opération, telle que cliquer sur un bouton, puis à afficher une boîte modale pour fournir des commentaires à l'utilisateur ou le guider. pour effectuer une interaction vers le bas. L'interaction d'une boîte modale peut comprendre 5 étapes :

1. Il existe un bouton ou un lien sur lequel l'utilisateur clique pour déclencher l'affichage de la boîte modale ;

2. Lorsque la boîte modale est affichée, il y aura un calque de masque transparent qui bloque toute la fenêtre actuelle ;

3. Le contenu de la boîte modale apparaîtra à une certaine position (généralement au milieu) de la fenêtre dans une couleur non transparente (généralement blanche) ;

4. Le contenu de la boîte modale (généralement dans le coin supérieur droit) aura un signe de fermeture. Cliquer dessus masquera la boîte modale ;

5. Le contenu de la boîte modale doit être spécifié en fonction du scénario commercial réel, afin qu'il puisse avoir n'importe quelle structure.

style

1. .modalbox est initialement masqué ;

1. .modalbox est un calque de masque transparent ;

2. .modalbox-dialog est une couche de contenu non transparente ;

3. Après avoir cliqué sur le lien Afficher la boîte modale, .modalbox sera affiché ;

4. Après avoir cliqué sur .modalbox-close-btn, .modalbox sera masqué ;

Exemple d'effet

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.