Fenêtre modale avec jQuery [jquery01]

L’objectif de cet exercice est de créer une fenêtre modale en HTML et CSS dont l’affichage sera contrôlé avec jQuery, une bibliothèque JavaScript.

Aperçu du résultat final

« Une fenêtre modale est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et de l’écran. Elle est en général associée à une question à laquelle il est impératif que l’utilisateur réponde avant de poursuivre, ou de modifier quoi que ce soit. »

Source : Article Fenêtre modale de Wikipédia en français (auteurs)

Contenu de la fenêtre modale

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.

Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst. Vivamus facilisis diam at odio. Mauris dictum, nisi eget consequat elementum, lacus ligula molestie metus, non feugiat orci magna ac sem. Donec turpis. Donec vitae metus. Morbi tristique neque eu mauris. Quisque gravida ipsum non sapien. Proin turpis lacus, scelerisque vitae, elementum at, lobortis ac, quam. Aliquam dictum eleifend risus. In hac habitasse platea dictumst. Etiam sit amet diam. Suspendisse odio. Suspendisse nunc. In semper bibendum libero.

Proin nonummy, lacus eget pulvinar lacinia, pede felis dignissim leo, vitae tristique magna lacus sit amet eros. Nullam ornare. Praesent odio ligula, dapibus sed, tincidunt eget, dictum ac, nibh. Nam quis lacus. Nunc eleifend molestie velit. Morbi lobortis quam eu velit. Donec euismod vestibulum massa. Donec non lectus. Aliquam commodo lacus sit amet nulla. Cras dignissim elit et augue. Nullam non diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Aenean vestibulum. Sed lobortis elit quis lectus. Nunc sed lacus at augue bibendum dapibus.

Consignes de l’exercice

Mise en place des fichiers

Créez, à l’emplacement de votre choix, un dossier racine vous permettant de stocker la totalité des fichiers de l’exercice.

Dans le dossier racine, créez les fichiers vierges suivants :

page.html
style.css
javascript.js

HTML : Dans le fichier page.html, construisez la structure de base d’un document HTML.

Voici la structure de base d’une page HTML.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Titre de la page</title>
    </head>
    <body>

    </body>
</html>

<!doctype html><html lang="fr">    <head>        <meta charset="utf-8">        <title>Titre de la page</title>    </head>    <body>    </body></html>

HTML : Ajoutez le code nécessaire pour lier les deux fichiers style.css et javascript.js à votre fichier page.html.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Exercice fenêtre modale</title>
        <link href="style.css" rel="stylesheet">
        <script src="javascript.js" type="text/javascript"></script>
    </head>
    <body>
    
    </body>
</html>

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>Exercice fenêtre modale</title>        <link href="style.css" rel="stylesheet">        <script src="javascript.js" type="text/javascript"></script>    </head>    <body>        </body></html>

Construction de la fenêtre modale

HTML : Ajoutez du contenu à base de Lorem Ipsum dans le document HTML.

HTML : Juste après la balise <body>, ajoutez un élément HTML <div> avec la classe modale-masque.

<div class="modale-masque">
</div>

<div class="modale-masque"></div>

CSS : Faites en sorte d’afficher l’élément modale-masque comme illustré dans l’image suivante (le fond noir).

Il occupe toute la fenêtre en se plaçant par-dessus le contenu existant tout en le laissant apparaître par transparence.

Position fixe par rapport à body.
Dimensions 100 % en largeur et en hauteur.
Superposition élevée : z-index: 1000 ;
Couleur d’arrière-plan noire avec une opacité de 80 %.

Il existe plusieurs solutions pour les deux premiers points…

.modale-masque {
  /* Occupe tout l'espace */
  position: fixed;
  inset: 0;
  /* Affiche par dessus les autres éléments */
  z-index: 1000;
  /* Fond transparent */
  background-color: rgba(0, 0, 0, 0.8);
}

.modale-masque {  /* Occupe tout l'espace */  position: fixed;  inset: 0;  /* Affiche par dessus les autres éléments */  z-index: 1000;  /* Fond transparent */  background-color: rgba(0, 0, 0, 0.8);}

HTML : À l’intérieur de l’élément HTML masque, insérez deux autres éléments <div> imbriqués avec les classes modale-conteneur et message. Insérez également le contenu Contenu de la fenêtre modale dans l’élément modale-contenu.

<div class="modale-masque">
    <div class="modale-conteneur">
        <div class="modale-contenu">
            Contenu de la fenêtre modale
        </div>
    </div>
</div>

<div class="modale-masque">    <div class="modale-conteneur">        <div class="modale-contenu">            Contenu de la fenêtre modale        </div>    </div></div>

CSS : Modifiez les éléments modale-conteneur et modale-contenu pour obtenir le résultat suivant :

Le conteneur est défini comme élément flexible qui occupe tout l’écran afin de pouvoir centrer facilement le contenu dans la page horizontalement et verticalement.

Le contenu est dimensionné afin de pouvoir s’adapter au futur contenu.

.modale-conteneur {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.modale-contenu {
  background-color: #fff;
  box-sizing: border-box;
  padding: 20px;
  width: 600px;
  max-width: calc(100% – 40px);
  min-height: 200px;
  max-height: calc(100dvh – 40px);
  overflow: auto;
}

.modale-conteneur {  display: flex;  width: 100%;  height: 100%;  justify-content: center;  align-items: center;}.modale-contenu {  background-color: #fff;  box-sizing: border-box;  padding: 20px;  width: 600px;  max-width: calc(100% - 40px);  min-height: 200px;  max-height: calc(100dvh - 40px);  overflow: auto;}

Dans votre navigateur, essayez de sélectionner le texte en lorem ipsum. Est-ce que vous y arrivez ? Pouvez-vous faire défiler la page ?

CSS : Rendez invisible l’élément modale-masque.

.modale-masque {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
}

.modale-masque {  position: fixed;  inset: 0;  z-index: 1000;  background-color: rgba(0, 0, 0, 0.8);  display: none;}

Ouverture et fermeture de la fenêtre modale

HTML : Ajoutez un bouton HTML avec l’id modale-ouvrir dans page.html. Ce bouton servira à ouvrir la fenêtre modale.

<button id="modale-ouvrir">Ouvrir la fenêtre modale</button>

<button id="modale-ouvrir">Ouvrir la fenêtre modale</button>

HTML : Intégrez la bibliothèque jQuery à votre page.html. Vous pouvez la télécharger ou l’intégrer via un CDN.

La bibliothèque jQuery doit être chargée avant le fichier javascript.js !

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Exemple fenêtre modale</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="styles.css" rel="stylesheet" type="text/css"/>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script src="javascript.js" type="text/javascript"></script>
    </head>
    <body>

<!DOCTYPE html><html lang="fr">    <head>        <title>Exemple fenêtre modale</title>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <link href="styles.css" rel="stylesheet" type="text/css"/>        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>        <script src="javascript.js" type="text/javascript"></script>    </head>    <body>

JS : Préparez le fichier javascript.js avec le code adapté pour attendre que le DOM soit disponible.

Ressource : https://api.jquery.com/ready/

$(document).ready(function() {
    
    // Le reste du code JavaScript sera ici !
    
});

$(document).ready(function() {        // Le reste du code JavaScript sera ici !    });

JS : Utilisez le sélecteur adapté et l’événement click avec une fonction de rappel (callback) pour pouvoir lancer l’action de votre choix suite à un clic sur le bouton modale-ouvrir:

Ressource : https://api.jquery.com/click/

$(document).ready(function() {
    $('#modale-ouvrir').on("click",function(){
    
        // Code à exécuter suite au clic sur modale-ouvrir

    });
});

$(document).ready(function() {    $('#modale-ouvrir').on("click",function(){            // Code à exécuter suite au clic sur modale-ouvrir    });});

JS : Utilisez le sélecteur adapté et la méthode show() pour afficher l’élément HTML masque suite à un clic sur le bouton modale-ouvrir.

Ressource : https://api.jquery.com/show/

$(document).ready(function() {
    $('#modale-ouvrir').on( "click", function() {
        $('.modale-masque').show();
    });
});

$(document).ready(function() {    $('#modale-ouvrir').on( "click", function() {        $('.modale-masque').show();    });});

JS : Essayez les méthodes suivantes à la place de la méthode show(). Quelles sont les différences ?

fadeIn()
slideDown()
toggle()

HTML/CSS/JS : Insérez dans l’élément modale-contenu un bouton permettant de fermer la fenêtre modale.

Une croix est insérée grâce au code ×. Le bouton a un id pour le ciblage JS et un et classe pour le CSS. La classe est facultative mais permet homogénéiser les sélecteurs.

<button id="modale-fermer" class="modale-fermer" type="button" aria-label="Fermer la fenêtre">
    &times;
</button>

<button id="modale-fermer" class="modale-fermer" type="button" aria-label="Fermer la fenêtre">    &times;</button>

Le conteneur doit être positionné en relative afin de pouvoir positionner simplement le bouton de fermeture.

.modale-contenu {
  position: relative;
  background-color: #fff;
  box-sizing: border-box;
  padding: 20px;
  width: 600px;
  max-width: calc(100% – 40px);
  min-height: 200px;
  max-height: calc(100dvh – 40px);
  overflow: auto;
}
.modale-fermer {
  position: absolute;
  top: 0px;
  right: 3px;
  background: none;
  border: none;
  font-size: 2.5rem;
  cursor: pointer;
}

.modale-contenu {  position: relative;  background-color: #fff;  box-sizing: border-box;  padding: 20px;  width: 600px;  max-width: calc(100% - 40px);  min-height: 200px;  max-height: calc(100dvh - 40px);  overflow: auto;}.modale-fermer {  position: absolute;  top: 0px;  right: 3px;  background: none;  border: none;  font-size: 2.5rem;  cursor: pointer;}

$(document).ready(function() {
  $("#modale-ouvrir").click(function() {
    $(".modale-masque").fadeIn();
    $(".modale-contenu").slideDown();
  });

  $("#modale-fermer").click(function() {
    $(".modale-contenu").slideUp();
    $(".modale-masque").fadeOut();
  });
});

$(document).ready(function() {  $("#modale-ouvrir").click(function() {    $(".modale-masque").fadeIn();    $(".modale-contenu").slideDown();  });  $("#modale-fermer").click(function() {    $(".modale-contenu").slideUp();    $(".modale-masque").fadeOut();  });});

JS : Pour améliorer l’UX nous pourrions faire un sorte que le clique en dehors de la fenêtre permette de la fermer.

Solution 1 : Cette solution consiste à ajouter stopPropagation() qui empêche le clic de remonter aux éléments parents. Cliquer dans le contenu ne déclenche donc pas la fermeture portée par .modale-conteneur.

$(document).ready(function() {
  $("#modale-ouvrir").click(function() {
    $(".modale-masque").fadeIn();
    $(".modale-contenu").slideDown();
  });

  $("#modale-fermer").click(function() {
    $(".modale-contenu").slideUp();
    $(".modale-masque").fadeOut();
  });

  $(".modale-conteneur").click(function() {
    $(".modale-contenu").slideUp();
    $(".modale-masque").fadeOut();
  });

  $(".modale-contenu").click(function(event) {
    event.stopPropagation();
  });
});

$(document).ready(function() {  $("#modale-ouvrir").click(function() {    $(".modale-masque").fadeIn();    $(".modale-contenu").slideDown();  });  $("#modale-fermer").click(function() {    $(".modale-contenu").slideUp();    $(".modale-masque").fadeOut();  });  $(".modale-conteneur").click(function() {    $(".modale-contenu").slideUp();    $(".modale-masque").fadeOut();  });  $(".modale-contenu").click(function(event) {    event.stopPropagation();  });});

Solution 2 : Cette seconde solution consiste à vérifier précisément quel élément est cliqué.

$(document).ready(function() {
  $("#modale-ouvrir").click(function() {
    $(".modale-masque").fadeIn();
    $(".modale-contenu").slideDown();
  });

  $("#modale-fermer").click(function() {
    $(".modale-contenu").slideUp();
    $(".modale-masque").fadeOut();
  });

  $(".modale-masque").on("click", function (event) {
    if ($(event.target).is(".modale-masque, .modale-conteneur")) {
      $(".modale-contenu").slideUp();
      $(".modale-masque").fadeOut();
    }
  });
});

$(document).ready(function() {  $("#modale-ouvrir").click(function() {    $(".modale-masque").fadeIn();    $(".modale-contenu").slideDown();  });  $("#modale-fermer").click(function() {    $(".modale-contenu").slideUp();    $(".modale-masque").fadeOut();  });  $(".modale-masque").on("click", function (event) {    if ($(event.target).is(".modale-masque, .modale-conteneur")) {      $(".modale-contenu").slideUp();      $(".modale-masque").fadeOut();    }  });});

Sauf mention contraire*, l’article Fenêtre modale avec jQuery jquery01 et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution – Pas d’Utilisation Commerciale – Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

S’abonner

Ce site utilise Akismet pour réduire les indésirables. Découvrez comment les données de vos commentaires sont traitées.

2 Commentaires

Le plus ancien

Le plus récent Le plus populaire

De passage

7 années il y a

$(document).ready(function() {
$(‘#modale_ouvrir’).click(function(){
$(‘.masque’).show();
});
});
au lieu de:

$(document).ready(function() {
$(‘.modale_ouvrir’).click(function(){
$(‘.masque’).show();
});
});
Merci et courage!!!!

Répondre

Julien Crego

Auteur

Répondre à De passage

Merci ! Effectivement j’ai corrigé la coquille…