mars 13, 2021

Fenêtre modale avec jQuery

Dans ce tutoriel, nous verrons comment créer une fenêtre modale avec jQuery qui est affichée sous la forme d’une fenêtre contextuelle en appuyant sur un bouton. Si vous ne connaissez pas JQuery, il est conseillé de passer un œil sur le tutoriel de l’introduction à JQuery.

Une fenêtre modale est une fenêtre de dialogue généralement affichée à l’écran au-dessus du reste de l’écran. Le contenu, généralement, les fenêtres modales bloquent l’accès au reste du contenu de la page jusqu’à ce qu’il interagit avec eux d’une manière ou d’une autre. Ils sont utilisés comme remplacement des messages d’alerte alert() de tout navigateur, de sorte qu’une fenêtre plus homogène et personnalisable soit obtenue.

Avant de commencer, comprend JQuery Sur votre projet, puis suivez les étapes que vous voyez ci-dessous.

version simplifiée

Nous créerons d’abord une version simple qui vient d’avoir des styles associés. Il est courant que les fenêtres modales soient affichées sur une couverture ou une superposition qui diffuse en quelque sorte le contenu de la page. De cette manière, il est impliqué que l’utilisateur doit interagir avec la fenêtre. C’est pourquoi nous allons ajouter un à laquelle nous allons attribuer la classe .overlay

Suivant Nous sommes Aller ajouter la fenêtre, qui aura la classe .modal ainsi qu’un bouton qui vous permet de l’ouvrir. Dans la fenêtre, il y aura également un bouton qui vous permet de le fermer:

<h1>Modal</h1><div class="overlay"></div><div class="modal"> <h2>Modal</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <button class="close">Close</button> </div><button class="open">Open</button>

Suivant, nous ajouterons le code JQuery, qui consistera en un Action qui attribue la classe .active à la fois sur la superposition et la fenêtre lorsque nous cliquons sur le bouton d’ouverture. Nous ajouterons également un autre qui élimine la classe .active des deux éléments en appuyant sur la touche de fermeture.

$(".open").on("click", function(){ $(".overlay, .modal").addClass("active");});$(".close, .overlay").on("click", function(){ $(".overlay, .modal").removeClass("active");});

A Continuation Nous définirons les styles CSS. La partie la plus pertinente est dans la classe .active qui alterne la visibilité de la superposition et la fenêtre en modifiant son z-index et votre propriété

et votre propriété

et votre propriété

et votre propriété

et votre propriété id = « 2e8b1b4d58″>

respectivement. Votre opacité sera également modifiée pour créer une transition.

.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: .3s ease; z-index: -1; background: #000;}.overlay.active { opacity: 0.5; z-index: 2;}.modal { color: #fff; background: #000; max-height: calc(100% - 100px); position: fixed; top: 50%; left: 50%; max-width: 450px; transform: translate(-50%, -50%); visibility: hidden; opacity: 0; transition: .3s ease;}.modal.active { visibility: visible; z-index: 2; opacity: 1;}

et avec cette version de base de notre fenêtre modale sera prête. Vous pouvez voir le résultat en fonctionnement ici.

Version avancée

Partir de la version simplifiée, nous ajouterons une autre action, la fenêtre est donc aussi proche lorsque nous appuyez sur la touche Echap. :

$(document).keyup(function(e) { if (e.keyCode === 27) { $(".overlay, .modal").removeClass("active"); }});

Nous ajouterons également certains styles CSS afin qu’il ne semble pas que la fenêtre modale soit il y a 20 ans:

Et comme vous pouvez le constater dans le résultat final, l’aspect de notre fenêtre s’est beaucoup amélioré. Vous pouvez voir le résultat en fonctionnement ici.

Avatar d’Edu Lazaro

EDU LÁZARO : Ingénieur technique en informatique, je travaille actuellement en tant que développeur Web et programmeur de jeux vidéo.

👋 Bonjour! Je suis Edu, j’aime créer des choses et j’ai écrit ce guide. Si vous avez été utile, la plus grande faveur que vous puissiez me faire est de me conformer à Twitter 😊

Si vous voulez connaître mes projets, suivez-moi sur Twitter.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *