Vous êtes sur la page 1sur 6

Crez une fentre modale avec CSS et jQuery

par Soh Tanaka (SohTanaka) Didier Mouronval (Traducteur)


Date de publication : 04 mars 2011 Dernire 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 prsente une mthode permettant de crer une popup CSS du mme style que celles utilises par la bibliothque Lightview.

Crez une fentre modale avec CSS et jQuery par Soh Tanaka (SohTanaka) Didier Mouronval (Traducteur)

Prsentation................................................................................................................................................................. 3 La structure HTML....................................................................................................................................................... 3 La mise en forme avec le CSS...................................................................................................................................4 Mise en place de jQuery............................................................................................................................................. 4 La touche finale : le code jQuery................................................................................................................................ 5 Dmo et conclusion..................................................................................................................................................... 6 Remerciements............................................................................................................................................................ 6

-2Copyright 2011 - Soh Tanaka. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.
http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/

Crez une fentre modale avec CSS et jQuery par Soh Tanaka (SohTanaka) Didier Mouronval (Traducteur)

Prsentation
Il existe de nombreux scripts de fentres modales (de type pop-up) simples implmenter et lgantes. Mais la plupart du temps, ces scripts peuvent rentrer en conflit avec la logique propre de la page. J'ai t rcemment confront un cas o il m'tait impossible d'utiliser les scripts comme prettyPhoto. J'ai donc d dvelopper ma propre fentre modale pour y insrer du code (X)HTML. Je vais vous expliquer comment j'ai procd. fancybox ou

Voir une dmo en ligne Voir la dmo en ligne

La structure HTML
Commenons par ajouter une balise <a> avec les attributs suivants : href - #?w=500 : spcifie la largeur de la fentre ; rel : dfinit la relation avec la pop-up ouvrir ; class="poplight" : classe CSS pour grer les pop-up.
<a href="#?w=500" rel="popup_name" class="poplight">En savoir plus</a>

Ensuite, nous ajoutons le code (X)HTML des fentres. Vous pouvez les placer o vous voulez dans la page, pour ma part, j'ai opt pour les mettre en fin de code. Notez bien que l'attribut id correspond l'attribut rel de la balise <a>. Cela permet d'tablir la relation entre le lien et la fentre correspondante.
<div id="popup_name" class="popup_block"> -3Copyright 2011 - Soh Tanaka. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.
http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/

Crez une fentre modale avec CSS et jQuery par Soh Tanaka (SohTanaka) Didier Mouronval (Traducteur) <h2>Developpez.com</h2> <p>Soh Tanaka est traduit sur developpez.com.</p> </div>

La mise en forme avec le CSS


Le code CSS est comment afin de vous expliquer comment il fonctionne. Notez que nous ne prcisons pas le margin pour la classe .popup_block : comme la taille de la fentre peut varier, c'est jQuery qui le calculera l'tape suivante.
#fade { /*--Masque opaque noir de fond--*/ display: none; /*--masqu par dfaut--*/ background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .80; z-index: 9999; } .popup_block{ display: none; /*--masqu par dfaut--*/ background: #fff; padding: 20px; border: 20px solid #ddd; float: left; font-size: 1.2em; position: fixed; top: 50%; left: 50%; z-index: 99999; /*--Les diffrentes dfinitions de Box Shadow en CSS3--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--Coins arrondis en CSS3--*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } img.btn_close { float: right; margin: -55px -55px 0 0; } /*--Grer la position fixed pour IE6--*/ *html #fade { position: absolute; } *html .popup_block { position: absolute; }

Mise en place de jQuery


Pour ceux qui ne sont pas familiers avec jQuery, je vous invite mieux connaitre cette librairie sur leur site pour comprendre comment elle fonctionne. Vous pouvez choisir de tlcharger ou de le charger depuis le site Google.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></ script>

Aprs avoir charg jQuery, vous pouvez ouvrir une nouvelle balise <script> et commencer votre code avec l'vnement $(document).ready, ce qui permet au code jQuery d'tre excut ds que le DOM est disponible. Le reste du code ncessaire au script s'y trouvera.
-4Copyright 2011 - Soh Tanaka. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.
http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/

Crez une fentre modale avec CSS et jQuery par Soh Tanaka (SohTanaka) Didier Mouronval (Traducteur)

$(document).ready(function() { //Le code ici });

La touche finale : le code jQuery


Le code suivant est comment pour vous permettre de comprendre le fonctionnement du script.
//Lorsque vous cliquez sur un lien de la classe poplight et que le href commence par # $('a.poplight[href^=#]').click(function() { var popID = $(this).attr('rel'); //Trouver la pop-up correspondante var popURL = $(this).attr('href'); //Retrouver la largeur dans le href //Rcuprer les variables depuis le lien var query= popURL.split('?'); var dim= query[1].split('&'); var popWidth = dim[0].split('=')[1]; //La premire valeur du lien //Faire apparaitre la pop-up et ajouter le bouton de fermeture $('#' + popID).fadeIn().css({ 'width': Number(popWidth) }) .prepend(''); //Rcupration du margin, qui permettra de centrer la fentre - on ajuste de 80px en conformit avec le CSS var popMargTop = ($('#' + popID).height() + 80) / 2; var popMargLeft = ($('#' + popID).width() + 80) / 2; //On affecte le margin $('#' + popID).css({ 'margin-top' : -popMargTop, 'margin-left' : -popMargLeft }); //Effet fade-in du fond opaque $('body').append(''); //Ajout du fond opaque noir //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); return false; }); //Fermeture de la pop-up et du fond $('a.close, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque... $('#fade , .popup_block').fadeOut(function() { $('#fade, a.close').remove(); //...ils disparaissent ensemble }); return false; });

-5Copyright 2011 - Soh Tanaka. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.
http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/

Crez une fentre modale avec CSS et jQuery par Soh Tanaka (SohTanaka) Didier Mouronval (Traducteur)

Dmo et conclusion

Voir la dmo en ligne Voir la dmo en ligne Si vous tes l'aise avec jQuery et que vous voyez des amliorations apporter au code, n'hsitez pas les proposer. A l'inverse, si vous tes dbutant et que des points ne vous semblent pas clairs, faites la demande sur le forum.

Remerciements
Ce tutoriel a t traduit avec l'aimable autorisation de Soh Tanaka ( voir l'article original).

Merci ClaudeLELOUP pour sa relecture attentive et efficace.

-6Copyright 2011 - Soh Tanaka. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.
http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/