Fenêtre modale avec jQuery jquery01

Publié le par Julien Crego
Mise à jour le

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, le fameux framework 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)
Edit

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
  • styles.css
  • javascript.js

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

Afficher la solution

Solution :

<!DOCTYPE html>
<html>
	<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 styles.css et javascript.js à votre fichier page.html.

Afficher la solution HTML

Solution HTML :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Exercice fenêtre modale</title>
		<link href="styles.css" rel="stylesheet" type="text/css" />
		<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.

Aperçu de la page avec du contenu

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

CSS : Faites en sorte d’afficher l’élément 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 .

Aperçu du masque de la fenêtre modale.
Afficher la démarche à suivre

Démarche à suivre

  1. Position fixe en haut à gauche par rapport à body.
  2. Dimensions 100% en largeur et en hauteur.
  3. Superposition élevée : z-index: 1000 ;
  4. Couleur d’arrière-plan noir avec une opacité de 80%.
Afficher la solution CSS

Solution CSS :

.masque {
    /* On place l'élément dans le coin supérieur gauche de l'écran */
    position: fixed;
    top:0px;
    left:0px;
	
    /* On dimensionne l'élément pour qu'il occupe tout l'écran */
    width: 100%; /* 100 vw */
    height:100%;  /* 100 vh */
	
    /* On positionne l'élément par dessus tout le reste */
    z-index: 1000;

    /* On ajoute un arrière-plan noir opaque à 80% */
    background-color: rgba(0,0,0,0.8);
}

HTML : À l’intérieur de l’élément HTML masque, insérez un autre élément <div> avec la classe message et le contenu Contenu de la fenêtre modale.

CSS : Modifiez l’élément message comme illustré dans l’image suivante.

Aperçu de la fenêtre modale
Afficher la démarche à suivre

Démarche à suivre

  1. Couleur d’arrière-plan de votre choix.
  2. Dimensions 300px de largeur et 200px de hauteur.
  3. Centrage en utilisant des marges automatiques ou une flexbox.
  4. Couleur d’arrière-plan noir avec une opacité de 80%.
Afficher la solution CSS

Solution CSS :

.message {
    background-color: #40bc81;
    width: 300px;
    height: 200px;
    margin: 100px auto;
    padding: 10px; 
}

Dans votre navigateur, essayez de sélectionner le texte en lorem ipsum. Est-ce que vous y arrivez ?

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

Afficher la solution CSS

Solution CSS :

.masque {
    position: fixed;
    top:0px;
    left:0px;	
    width: 100%; /* 100 vw */
    height:100%;  /* 100 vh */
    z-index: 1000;
    background-color: rgba(0,0,0,0.8);
	
    /* On masque l'élément */
    display: none ;
}

Ouverture et fermeture de la fenêtre modale

HTML : Ajoutez un bouton HTML avec l’id modale_ouvrir dans page.html.

Afficher la solution HTML

Solution HTML :

<button id="modale_ouvrir">Afficher 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 !

Afficher la solution HTML

Solution HTML :

<!DOCTYPE html>
<html>
    <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="javascripts.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.

Afficher la solution JS

Solution JS :

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

JS : Utilisez le sélecteur adapté et la méthode click() avec une fonction de callback pour pouvoir lancer l’action de votre choix suite à un clique sur le bouton modale_ouvrir:

Afficher la solution JS

Solution JS :

$(document).ready(function() {
	$('#modale_ouvrir').click(function(){
	
		// Code à exécuter suite au clique sur l'élément ayant l'id modale_ouvrir

	});
});

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

Afficher la solution JS

Solution JS :

$(document).ready(function() {
	$('#modale_ouvrir').click(function(){
		$('.masque').show();
	});
});

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

  • fadeIn();
  • slideDown();
  • toggle().

HTML & JS : Insérez dans l’élément message un bouton permettant de fermer la fenêtre modale.

CSS : Personnalisez les boutons et la fenêtre modale pour les rendre plus esthétiques.

Correction

Afficher la solution

Solution :

La solution proposée utilise le langage SCSS, pourvoir le code CSS correspond, veuillez cliquer sur le bouton View Compiled.

Edit

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

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.

2 réactions sur “ Fenêtre modale avec jQuery [jquery01] ”

  1. De passage Réponse

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

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

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.