You are on page 1of 6

Créez une fenêtre modale avec CSS et jQuery

par Soh Tanaka (SohTanaka) Didier Mouronval (Traducteur)
Date de publication : 04 mars 2011 Dernière mise à jour :

Cet article est la traduction de l'article : Inline Modal Window w/ CSS and jQuery. Retrouvez toutes les traductions de Soh Tanaka disponibles sur http:// sohtanaka.developpez.com/. Tout au long de cet article, l'auteur vous présente une méthode permettant de créer une popup CSS du même style que celles utilisées par la bibliothèque Lightview.

.......................... http://sohtanaka......................... images.4 Mise en place de jQuery......................................... ne peut être faite de ce site et de l'ensemble de son contenu : textes............................. Droits de diffusion permanents accordés à developpez LLC..........................................................Créez une fenêtre modale avec CSS et jQuery par Soh Tanaka (SohTanaka) Didier Mouronval (Traducteur) Présentation......Soh Tanaka.....................................................................................com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/ .................. même partielle..................................... 6 Remerciements..... 5 Démo et conclusion...........................................................................................developpez................................................................................................................................................ 4 La touche finale : le code jQuery............................... Aucune reproduction............................................................................................................ 3 La mise en forme avec le CSS........... 6 -2Copyright 2011 .......................................................................................... 3 La structure HTML............................................... documents.................................. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts............................................................................................... etc sans l'autorisation expresse de l'auteur................................................

Créez une fenêtre modale avec CSS et jQuery par Soh Tanaka (SohTanaka) Didier Mouronval (Traducteur) Présentation Il existe de nombreux scripts de fenêtres modales (de type pop-up) simples à implémenter et élégantes. class="poplight" : classe CSS pour gérer les pop-up. nous ajoutons le code (X)HTML des fenêtres.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/ . Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. fancybox ou Voir une démo en ligne Voir la démo en ligne La structure HTML Commençons par ajouter une balise <a> avec les attributs suivants : • • • href . pour ma part. http://sohtanaka. rel : définit la relation avec la pop-up à ouvrir . J'ai donc dû développer ma propre fenêtre modale pour y insérer du code (X)HTML. J'ai été récemment confronté à un cas où il m'était impossible d'utiliser les scripts comme prettyPhoto. ces scripts peuvent rentrer en conflit avec la logique propre de la page.Soh Tanaka. ne peut être faite de ce site et de l'ensemble de son contenu : textes. Je vais vous expliquer comment j'ai procédé. Droits de diffusion permanents accordés à developpez LLC. Vous pouvez les placer où vous voulez dans la page.#?w=500 : spécifie la largeur de la fenêtre . même partielle. Notez bien que l'attribut id correspond à l'attribut rel de la balise <a>. Aucune reproduction. <a href="#?w=500" rel="popup_name" class="poplight">En savoir plus</a> Ensuite. images. etc sans l'autorisation expresse de l'auteur. documents.developpez. Mais la plupart du temps. <div id="popup_name" class="popup_block"> -3Copyright 2011 . j'ai opté pour les mettre en fin de code. Cela permet d'établir la relation entre le lien et la fenêtre correspondante.

Créez une fenêtre modale avec CSS et jQuery par Soh Tanaka (SohTanaka) Didier Mouronval (Traducteur) <h2>Developpez. Droits de diffusion permanents accordés à developpez LLC. même partielle. http://sohtanaka.js"></ script> Après avoir chargé jQuery. border: 20px solid #ddd. #fade { /*--Masque opaque noir de fond--*/ display: none. height: 100%. } img. etc sans l'autorisation expresse de l'auteur. margin: -55px -55px 0 0.80.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/ . Notez que nous ne précisons pas le margin pour la classe . je vous invite à mieux connaitre cette librairie sur leur site pour comprendre comment elle fonctionne. top: 0. ne peut être faite de ce site et de l'ensemble de son contenu : textes. /*--masqué par défaut--*/ background: #fff. font-size: 1. c'est jQuery qui le calculera à l'étape suivante. left: 0.2em. images. -moz-border-radius: 10px. <script type="text/javascript" src="http://ajax.min.com/ajax/libs/jquery/1. } Mise en place de jQuery Pour ceux qui ne sont pas familiers avec jQuery.googleapis. -moz-box-shadow: 0px 0px 20px #000.ready.popup_block{ display: none. Aucune reproduction. z-index: 9999.Soh Tanaka.developpez. top: 50%.btn_close { float: right. padding: 20px. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. } /*--Gérer la position fixed pour IE6--*/ *html #fade { position: absolute. } *html .popup_block : comme la taille de la fenêtre peut varier. border-radius: 10px.com</h2> <p>Soh Tanaka est traduit sur developpez. left: 50%. Vous pouvez choisir de télécharger ou de le charger depuis le site Google. vous pouvez ouvrir une nouvelle balise <script> et commencer votre code avec l'événement $(document). width: 100%.</p> </div> La mise en forme avec le CSS Le code CSS est commenté afin de vous expliquer comment il fonctionne. box-shadow: 0px 0px 20px #000. Le reste du code nécessaire au script s'y trouvera. z-index: 99999. /*--Coins arrondis en CSS3--*/ -webkit-border-radius: 10px. position: fixed. position: fixed. /*--Les différentes définitions de Box Shadow en CSS3--*/ -webkit-box-shadow: 0px 0px 20px #000. float: left. documents. opacity: .1/jquery. /*--masqué par défaut--*/ background: #000.com. } . ce qui permet au code jQuery d'être exécuté dès que le DOM est disponible.4. -4Copyright 2011 .popup_block { position: absolute.

var popWidth = dim[0].poplight[href^=#]'). //. images.remove(). var dim= query[1]. //Ajout du fond opaque noir //Apparition du fond . //Fermeture de la pop-up et du fond $('a.split('?').live('click'. //Effet fade-in du fond opaque $('body').ils disparaissent ensemble }). //On affecte le margin $('#' + popID). //Retrouver la largeur dans le href //Récupérer les variables depuis le lien var query= popURL. function() { //Au clic sur le bouton ou sur le calque.append('').click(function() { var popID = $(this)..width() + 80) / 2.. même partielle. //Récupération du margin.Soh Tanaka. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.height() + 80) / 2. La touche finale : le code jQuery Le code suivant est commenté pour vous permettre de comprendre le fonctionnement du script.css({ 'width': Number(popWidth) }) .developpez. #fade'). etc sans l'autorisation expresse de l'auteur.css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE $('#fade'). //Trouver la pop-up correspondante var popURL = $(this).close.css({'filter' : 'alpha(opacity=80)'})..ready(function() { //Le code ici }). return false. http://sohtanaka. }). var popMargLeft = ($('#' + popID).on ajuste de 80px en conformité avec le CSS var popMargTop = ($('#' + popID). //La première valeur du lien //Faire apparaitre la pop-up et ajouter le bouton de fermeture $('#' + popID).attr('rel')..css({ 'margin-top' : -popMargTop. ne peut être faite de ce site et de l'ensemble de son contenu : textes. return false.prepend('').fadeIn(). Droits de diffusion permanents accordés à developpez LLC.fadeOut(function() { $('#fade.fadeIn(). documents.close'). a. //Lorsque vous cliquez sur un lien de la classe poplight et que le href commence par # $('a. 'margin-left' : -popMargLeft }).com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/ . }).attr('href')..Créez une fenêtre modale avec CSS et jQuery par Soh Tanaka (SohTanaka) Didier Mouronval (Traducteur) $(document). -5Copyright 2011 .popup_block'). $('#fade . qui permettra de centrer la fenêtre .split('=')[1]. Aucune reproduction. .split('&').

Merci à ClaudeLELOUP pour sa relecture attentive et efficace. ne peut être faite de ce site et de l'ensemble de son contenu : textes. Remerciements Ce tutoriel a été traduit avec l'aimable autorisation de Soh Tanaka ( voir l'article original). même partielle. -6Copyright 2011 . n'hésitez pas à les proposer. documents.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/ .Créez une fenêtre modale avec CSS et jQuery par Soh Tanaka (SohTanaka) Didier Mouronval (Traducteur) Démo et conclusion Voir la démo en ligne Voir la démo en ligne Si vous êtes à l'aise avec jQuery et que vous voyez des améliorations à apporter au code. http://sohtanaka. Droits de diffusion permanents accordés à developpez LLC. images.developpez. faites la demande sur le forum. etc sans l'autorisation expresse de l'auteur. si vous êtes débutant et que des points ne vous semblent pas clairs. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Aucune reproduction. A l'inverse.Soh Tanaka.