novembre 30, 2020

Créer une fenêtre Modal avec JavaScript

créé: 09/25/2019
Mise à jour: 12/15/2020

Nous pourrions utiliser une bibliothèque de jQuery pour créer des fenêtres modales, mais dans ce cas, nous ne serons qu’avec JavaScript.

d’un côté, nous aurions le suivant HTML:

<button>Abrir modal</button> <div class="modalContainer"> <div class="modal-content"> <span class="close">×</span> <h2>Modal</h2> <p>Se ha desplegado el modal y bloqueado el scroll del body!</p> </div> </div> 

serait un bouton d’un côté, et le modal par un autre. Avec les CSS suivants, nous donnerions des styles au modal et nous le cachons par défaut:

.modalContainer {display: none; position: fixed; z-index: 1;padding-top: 100px;left: 0;top: 0;width: 100%;height: 100%; overflow: auto; background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);}.modalContainer .modal-content {background-color: #fefefe;margin: auto;padding: 20px;border: 1px solid lightgray;border-top: 10px solid #58abb7;width: 60%;}.modalContainer .close {color: #aaaaaa;float: right;font-size: 28px;font-weight: bold;}.modalContainer .close:hover,.modalContainer .close:focus {color: #000;text-decoration: none;cursor: pointer;}

maintenant, le code JavaScript:

if(document.getElementById("btnModal")){var modal = document.getElementById("tvesModal");var btn = document.getElementById("btnModal");var span = document.getElementsByClassName("close");var body = document.getElementsByTagName("body");btn.onclick = function() {modal.style.display = "block";body.style.position = "static";body.style.height = "100%";body.style.overflow = "hidden";}span.onclick = function() {modal.style.display = "none";body.style.position = "inherit";body.style.height = "auto";body.style.overflow = "visible";}window.onclick = function(event) {if (event.target == modal) {modal.style.display = "none";body.style.position = "inherit";body.style.height = "auto";body.style.overflow = "visible";}}}

Notre code effectuera ce qui suit: Lorsque vous appuyez sur la touche, vous allez visible notre modal et, en même temps, il assombrira le reste de la page. Lorsque vous cliquez sur le X ou hors du modal, il sera fermé.

D’autre part, pour nous empêcher de faire défiler deux fois au cas où le corps est long et que le contenu du modal aussi, lorsque Affichage de la fenêtre modale, nous bloquerons la taille et la position du corps afin que le défilement ne puisse pas être fait dedans.

Voir exemple en fonctionnement

Laisser un commentaire

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