Galactic Civilizations 3
Créer une fenêtre modale en JavaScript

Créer une fenêtre modale en JavaScript

Catégorie: Javascript.
Posté par le 03/10/2013.
Dernière mise à jour le 11/02/2014.

Description

Dans ce tutoriel, vous apprendrez comment créer une fenêtre modale en JavaScript à l'aide de JQuery.

Introduction

Ce tutoriel peut être réalisé à l'aide d'un simple éditeur de texte. Il nécessite des connaissances de base en HTML et en JavaScript.
Il nécessite également la bibliothèque JQuery.

La page

Pour commencer, nous allons créer un fichier du nom de tutorielsenfolie.html.
Ce fichier contiendra un lien qui permettra de créer la fenêtre modale en JavaScript.

tutorielsenfolie.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" >
<head>
   <head>
      <title></title>

      <!-- On importe la bibliothèque JQuery-->
      <script src="JQuery-1.10.1.min.js" type="text/javascript"></script>
      <link
rel="stylesheet" href="style.css" type="text/css" title="Default"/>
   </head>
   <body>
      <div
id="fond"></div>
      <a
href="#" id="show">Afficher la fenetre modale</a>
      <script
src="modal.js" type="text/javascript"></script>
      <div
id="modal" class="popup"></div>
   </body>
</html>

NB: Nous considérons que la bibliothèque JQuery (JQuery-1.10.1.min.js) se trouve dans le même dossier que le fichier « tutorielsenfolie.html ».

La feuille de style

Nous allons maintenant créer notre feuille de style qui permettra d'embellir notre fenêtre modale et surtout de la placer en dehors de l'écran.
Créez un fichier du nom de style.css et inscrivez-y les lignes suivantes:

style.css

#fond {
   position:absolute;
   z-index:9000;
   background-color:#000;
   display:none;
   border-radius: 10px;
}

.popup {
   position:fixed;
   width:440px;
   height:200px;
   display:none;
   z-index:9999;
   padding:20px;
   border-radius: 10px;
   background-color: white;
   border: 1px solid grey;
}

#modal {
   width:300px;
   height:200px;
}

Les attributs z-index et display:none permettent de cacher la fenêtre modale et le fond noir qui se placera derrière elle.

Le script JavaScript

Nous allons maintenant développer notre script qui permettra de créer et de cacher notre fenêtre modale. Nous allons diviser notre code en 3 fonctions:

  • showModal : permet d'afficher la fenêtre modale;
  • hideModal : permet de cacher la fenêtre modale;
  • resizeModal : permet de changer la taille de la fenêtre et du fond lorsque l'utilisateur modifie la taille du navigateur;

Le nom du fichier qui contiendra notre script permettant de créer et de cacher la fenêtre modale est « modal.js ».

Création de la fenêtre modale

Tout d'abord, nous devons changer le comportement du lien « Afficher la fenetre modale » afin qu'il exécute la fonction « showModal » lorsque l'on clique dessus.
Pour ce faire inscrivez les lignes suivantes:

modal.js

$(document).ready(function() {
   
   // Lorsque l'on clique sur show on affiche la fenêtre modale
   $('#show').click(function (e) {
       //On désactive le comportement du lien
        e.preventDefault();
      showModal();
   });
   
   // Lorsque l'on clique sur le fond on cache la fenetre modale   
   $('#fond').click(function () {
      hideModal();
    });
   
   // Lorsque l'on modifie la taille du navigateur la taille du fond change
   $(window).resize(function () {
      resizeModal()
   });
   
});

Comme vous pouvez le voir ci-dessus, nous avons changé le comportement de trois actions:

  • Lorsque l'on clique sur le lien « Afficher la fenetre modale », on affiche la fenêtre modale;
  • Lorsque l'on clique sur le fond, on cache la fenêtre modale;
  • Lorsque l'on modifie la taille du navigateur, on modifie également la taille de la fenêtre modale;

Voici le code qui permet d'afficher la fenêtre modale:

modal.js

function showModal(){
   var id = '#modal';
   $(id).html('Voici ma fenetre modale<br/><a href="#" class="close">Fermer la fenetre</a>');
   
   // On definit la taille de la fenetre modale
   resizeModal();
   
   // Effet de transition     
   $('#fond').fadeIn(1000);   
   $('#fond').fadeTo("slow",0.8);
   // Effet de transition   
   $(id).fadeIn(2000);
   
   $('.popup .close').click(function (e) {
      // On désactive le comportement du lien
      e.preventDefault();
      // On cache la fenetre modale
      hideModal();
    });
}

Suppression de la fenêtre modale

Comme vous avez pu le remarquer dans le code précédent, la fenêtre modale contiendra un lien permettant de la fermer.
Pour fermer la fenêtre modale ajoutez les lignes suivantes au fichier « modal.js »:

modal.js

function hideModal(){
   // On cache le fond et la fenêtre modale
   $('#fond, .popup').hide();
   $('.popup').html('');
}

Comme vous pouvez le voir, ce code est très simple, il supprime le contenu de la fenêtre modale et la fait disparaitre.

Modification de la taille de la fenêtre modale

Nous allons maintenant développer la méthode qui permet de changer la taille de la fenêtre modale. Pour ce faire, nous allons utiliser la taille de l'écran.
Voici les lignes à rajouter afin de modifier la taille de la fenêtre modale:

modal.js

function resizeModal(){
   var modal = $('#modal');
   // On récupère la largeur de l'écran et la hauteur de la page afin de cacher la totalité de l'écran
   var winH = $(document).height();
   var winW = $(window).width();
   
   // le fond aura la taille de l'écran
   $('#fond').css({'width':winW,'height':winH});
   
   // On récupère la hauteur et la largeur de l'écran
   var winH = $(window).height();
   // On met la fenêtre modale au centre de l'écran
   modal.css('top', winH/2 - modal.height()/2);
   modal.css('left', winW/2 - modal.width()/2);
}

Utilisation de cookies

Pour compléter ce tutoriel, je vais vous expliquer comment utiliser les cookies afin d'afficher la fenêtre modale pour les nouveaux utilisateurs.
Pour cela il faut rajouter le code ci-dessous dans le bloc « $(document).ready(function() »:

modal.js

$(document).ready(function() {
   ...
    // Si le cookie "dejaAffiche" n'existe pas, il faut afficher la fenêtre modale
    if (!readCookie('dejaAffiche')) {
        showModal();      
        // Ensuite, on crée le cookie "dejaAffiche" afin de ne plus afficher la fenêtre modale.
        createCookie('dejaAffiche', 1, 365);
    }
   ...
});
...

Affichage de la fenĂȘtre modale

Tu as aimé ce tutoriel ?
Aide nous à améliorer le site ! Deviens partenaire officiel ou suis nous sur facebook !

Commentaires[0]

Tu as aimé ce tutoriel ? Alors partage-le avec tes amis !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo Voir le flux rss

Mots Clés: cookies fenetre modal html JavaScript jQuery web

Veve :
(11/04/2013 - 17:19:44)
il faut juste mettre "sudo" à la place de "su" pour exécuter la commande en root

Veve :
(11/04/2013 - 17:18:56)
Salut tu peux aller lire ce tutoriel: http://www.tutorielsenfolie.com/tutoriels-63-installation-configuration-opennebula.html Il fonctionne aussi sous ubuntu

safa.souissi4 :
(10/04/2013 - 20:58:13)
s'il vous plait c urgent :(

safa.souissi4 :
(10/04/2013 - 20:56:25)
bonsoir,je cherche un tutos pour installer opennebula.org sous ubuntu 12.

Veve :
(18/03/2013 - 20:07:49)
oui, j'essaye de voir d'ou viens le problème.

sonde :
(18/03/2013 - 13:29:57)
re merci (j apprend un peu plus) je crois que j ai trouver pourquoi je peu pas poster si il y a ligne code impossible de poster lol

Veve :
(17/03/2013 - 21:34:49)
Salut, j'espère que ça t'a aidé.

sonde :
(17/03/2013 - 09:59:02)
pour ton aide

sonde :
(17/03/2013 - 09:57:36)
slt Veve impossible de laisser com

sonde :
(17/03/2013 - 09:56:55)
??

Demi-dieu :
(15/03/2013 - 18:41:13)
salut ^^

sonde :
(13/03/2013 - 14:49:35)
un petit coucou

Tanamoureuse :
(29/09/2011 - 06:11:08)
Je t'aime

Faire un don

Ma Publicité ici


Faire un don