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

**skybuck** · 05/09/2012, 13h35

bon .... j'ai reussi a regler mon probleme de compatibilité jquery
par contre
j'ai toujours un soucis. la croix ne saffiche pas ( pas bien grave j'ai mis un lien femeture) ...

mais je n'arrive toujours pas a ce que l'ouverture de ce popup se face automatiquement lorsque on arrive sur mon site

comment dois je faire ( j'ai utilisé le script initial ni plus ni moins)

merci de votre aide

**zebda** · 17/09/2012, 14h13

Envoyé par danielhagnoul

Bonsoir

L'article et le code sont intéressants, mais les codes (CSS, HTML, et jQuery) peuvent être améliorés.

Ci-dessous ma version HTML5 (je travaille pour l'avenir

), elle fonctionne comme prévu dans IE9, Chrome 10 et Firefox 4.

Pour les navigateurs obsolètes, le code du popup devrait fonctionner en remplaçant simplement le tag "section" par un tag "div".

@le_chomeur : je ne vois pas le problème, avec le code CSS corrigé bien entendu.

[Édition du 2011-06-20T22:00:00.000+02:00]

Motif : correction du code de l'exemple.

Lors du passage de la version 1.5.1 à la version 1.6+ la manière d'écrire un attribut data HTML5 a été modifiée. On doit maintenant impérativement écrire data-popup-class au lieu de data-popupClass, idem pour data-popup-width.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* TEST */
        .voile-noir {
            position: fixed;
            display: none;
            left: 0;
            top: 0; 
            width: 100%;
            height: 100%;
            opacity: 0.75;
            background: gray; 
            z-index: 9999;
        }
        .popup-block{
            position: fixed;
            display: none;
            top: 50%;
            left: 50%;
            padding: 20px; 	
            z-index: 99999;
            font-size: 1.2em;
            background: #fff;
            border: 20px solid #ddd;
            -webkit-box-shadow: 0px 0px 20px #000;
            -moz-box-shadow: 0px 0px 20px #000;
            box-shadow: 0px 0px 20px #000;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }
        .popup p {
            padding: 5px 10px;
            margin: 5px 0;
        }
        .popup-btn-close {
            float: right; 
            margin: -55px -55px 0 0;
        }
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
        <a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="500px">Voir la pop-up - Width = 500px</a>
        <!--
            Il ne manque qu'une chose ( souvent oublié ) => les listes déroulante et objet flash passent au dessus ...
            il faut utiliser une iframe en background ...
        -->
        <form style="display:block;width:300px;margin-left:500px;margin-top:100px;">
            <select>
                <option>Un mot pour remplir suffisament l'espace disponible</option>
                <option>Un mot pour remplir suffisament l'espace disponible</option>
                <option>Un mot pour remplir suffisament l'espace disponible</option>
                <option>Un mot pour remplir suffisament l'espace disponible</option>
                <option>Un mot pour remplir suffisament l'espace disponible</option>
                <option>Un mot pour remplir suffisament l'espace disponible</option>
                <option selected="selected">Un mot pour remplir suffisament l'espace disponible</option>
                <option>Un mot pour remplir suffisament l'espace disponible</option>
                <option>Un mot pour remplir suffisament l'espace disponible</option>
            </select>
        </form>
	</section>
    <section class="popup-block"> 
        <img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/bomber.gif" alt="Lil bomb dude" style="float: right; margin: 50px 0 0 20px;" /> 
        <h2>Popup #1</h2> 
        <p>Aliquip transverbero loquor esse ille vulputate exerci veniam fatua eros similis illum valde. Praesent, venio conventio rusticus antehabeo lenis. Melior pertineo feugait, praesent hos rusticus et haero facilisis abluo. </p> 
        <p>Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.</p>
    </section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script>
        $(function(){
            $(".popup-light").click(function() {
                var obj = $(this),
                    popupClass = obj.data("popupClass"),
                    popupWidth = obj.data("popupWidth"),
                    objPopup =  $('.' + popupClass);
 
                objPopup
                    .css("width", popupWidth)
                    .prepend('<img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/close_pop.png" class="popup-btn-close" title="Close Window" alt="Close" />')
                    .css({
                        // Si l'on regroupe les deux blocs CSS, le popup n'est pas bien positionné
                        // Le popup doit avoir sa taille définitive avant le calcul de outerHeight et de outerWidth
                        "margin-top":  -objPopup.outerHeight(true)/2,
                        "margin-left": -objPopup.outerWidth(true)/2
                    })
                    .fadeIn();
 
                $("<div/>", {
                    "class":"voile-noir",
                    "css":{
                        "filter":"alpha(opacity=80)"
                    }
                }).appendTo("body").fadeIn();
 
                return false;
            });
 
            $("body").delegate(".popup-btn-close, .voile-noir", "click", function(){
                $('.voile-noir , .popup-block').fadeOut(function(){
                    $(".popup-btn-close, .voile-noir").remove();
                });
 
                return false;
            });
        });
    </script>
</body>  
</html>

Cher Daniel Hagnoul
Merci pour ta contribution de ce code version html5

J'aurais une questions car je suis hyper nul en prog mais m'en sort un peu
Le contenu affiché par ton code fonctionne mais si on a deux popup différente, il est impossible de les différencier
peux tu m'aider a mettre en place des id pour différencier le contenu des popups
merci a vous tous

**zebda** · 17/09/2012, 18h46

une petite réponse svp, je sèche grave
comment différencier dans mon code le contenu des popups
avec je pense les balise id et rel

**danielhagnoul** · 17/09/2012, 21h25

J'ai modifié le code pour gérer plusieurs popup ayant la classe popup-block, popup-block2, popup-block3, etc.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* TEST */
        .voile-noir {
            position: fixed;
            display: none;
            left: 0;
            top: 0; 
            width: 100%;
            height: 100%;
            opacity: 0.75;
            background: gray; 
            z-index: 9999;
        }
        .popup-block, .popup-block2 {
            position: fixed;
            display: none;
            top: 50%;
            left: 50%;
            padding: 20px; 	
            z-index: 99999;
            font-size: 1.2em;
            background: #fff;
            border: 20px solid #ddd;
            -webkit-box-shadow: 0px 0px 20px #000;
            -moz-box-shadow: 0px 0px 20px #000;
            box-shadow: 0px 0px 20px #000;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }
        .popup p {
            padding: 5px 10px;
            margin: 5px 0;
        }
        .popup-btn-close {
            float: right; 
            margin: -55px -55px 0 0;
        }
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
        <a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="500px">Voir la pop-up - Width = 500px</a>
		<br/><br/>
        <a href="#" class="popup-light" data-popup-class="popup-block2" data-popup-width="400px">Voir la pop-up - Width = 400px</a>
	</section>
    <section class="popup-block"> 
        <img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/bomber.gif" alt="Lil bomb dude" style="float: right; margin: 50px 0 0 20px;" /> 
        <h2>Popup #1</h2> 
        <p>Aliquip transverbero loquor esse ille vulputate exerci veniam fatua eros similis illum valde. Praesent, venio conventio rusticus antehabeo lenis. Melior pertineo feugait, praesent hos rusticus et haero facilisis abluo. </p> 
        <p>Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.</p>
    </section>
    <section class="popup-block2"> 
        <img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/bomber.gif" alt="Lil bomb dude" style="float: right; margin: 50px 0 0 20px;" /> 
        <h2>Popup #2</h2> 
		<p>Quisque ac lacus. Aliquam erat volutpat. Vestibulum fringilla accumsan est. Mauris ipsum mauris, scelerisque vitae, aliquet aliquam, imperdiet sit amet, risus. Aliquam tincidunt. Vestibulum sit amet leo non dolor porttitor laoreet.</p>
		<p>Vivamus eu ante. Morbi tristique augue quis magna. Nullam tristique lorem id neque. Nam nibh elit, lobortis ac, euismod eu, feugiat id, diam. Etiam dui est, fringilla eget, dictum faucibus, ultrices ut, massa. Duis tempor.</p>
    </section>
	<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
    <script>
        $(function(){
            $( ".popup-light" ).click( function(){
                var obj = $(this),
                    popupClass = obj.data( "popupClass" ),
                    popupWidth = obj.data( "popupWidth" ),
                    objPopup =  $( '.' + popupClass );
 
                objPopup
                    .css( "width", popupWidth )
                    .prepend( '<img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/close_pop.png" class="popup-btn-close" title="Close Window" alt="Close" />' )
                    .css({
                        // Si l'on regroupe les deux blocs CSS, le popup n'est pas bien positionné
                        // Le popup doit avoir sa taille définitive avant le calcul de outerHeight et de outerWidth
                        "margin-top" :  -objPopup.outerHeight(true)/2,
                        "margin-left" : -objPopup.outerWidth(true)/2
                    })
                    .fadeIn();
 
                $( "<div/>", {
                    "class" : "voile-noir",
                    "css" : {
                        "filter" : "alpha(opacity=80)"
                    }
                }).appendTo( "body" ).fadeIn();
 
                return false;
            });
 
            $( "body" ).on( "click", ".popup-btn-close, .voile-noir", function(){
                $( ".voile-noir , [class^='popup-block']" ).fadeOut( function(){
                    $( ".popup-btn-close, .voile-noir" ).remove();
                });
 
                return false;
            });
        });
    </script>
</body>  
</html>

**zebda** · 17/09/2012, 21h46

Merci Daniel, c'est la belgium attitude

Je test cela est je te dis ca
Merci encore, je commençais a désespérer

**aks49** · 22/09/2012, 16h12

Ton tutoriel est vraiment top...Simple et Efficace !

Et un grand merci pour ton précédent code

**JojoLalu** · 06/11/2012, 13h03

Merci beaucoup pour ce tuto, il est génial.

J'ai juste une question. Je souhaiterais qu'après avoir fermé la popup, l'utilisateur soit redirigé vers une nouvelle page (à la place de la page d'origine). Est-ce possible? J'ai essayé de remplacer les href par mon url, mais rien ne se passe.

Merci encore pour ce tuto, et pour votre aide.

**JojoLalu** · 06/11/2012, 18h06

Envoyé par skybuck

bon .... j'ai reussi a regler mon probleme de compatibilité jquery
par contre
j'ai toujours un soucis. la croix ne saffiche pas ( pas bien grave j'ai mis un lien femeture) ...

mais je n'arrive toujours pas a ce que l'ouverture de ce popup se face automatiquement lorsque on arrive sur mon site

comment dois je faire ( j'ai utilisé le script initial ni plus ni moins)

merci de votre aide

Pour la croix, c'est normal, il faut que tu importes ta propre image de croix, au sein d'un <img src="" class="close" ...>

Pour que la pop-up se fasse à l'ouverture du site, c'est assez simple, dans le css "popup_block", tu enlèves le "display:none" et tu mets un "display:inline" ou "inline-block"... Normalement la popup s'affichera automatiquement.

**chris-toph** · 11/01/2013, 13h51

Bonjour,

je souhaite déterrer ce topic...

j'ai utilisé le script pour faire des popups en utilisant des liens <a> ce qui fonctionne très bien. Mon soucis se situe au niveau d'une map où j'ai donc placé des area. Si je met le même lien du href de la balise <a> que dans le href du l'area, ça ne fonctionne pas, même en ayant adapté le jquery pour que le l'action se passe lorsque je clic sur l'area de mon image...
Des idées?
Il y a un autre moyen qu'en faisant un windows.open() ?

**cédric20** · 13/01/2013, 21h29

Bonjour, j'ai utilisé ce script,

mais j'ai un souci avec le fond opaque qui parait devant la fenêtre...

j'ai pourtant jouer avec les z-index...mais rien n'y fait...

merci pour votre aide

**lvr** · 30/01/2013, 23h58

Petite erreur:

Dans le tuto je lis:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
        //Effet fade-in du fond opaque
        $('body').append(''); //Ajout du fond opaque noir

Et le fond noir n'apparaît pas.

Dans le code utilisé dans mon browser (la source) le code est

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
        //Effet fade-in du fond opaque
        $('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir

Et effectivement ça marche mieux...

Idem avec le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
        $('#' + popID).fadeIn().css({
            'width': Number(popWidth)
        })
                .prepend('');

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
       $('#' + popID).fadeIn().css({
            'width': Number(popWidth)
        })
                .prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');

**inoune** · 09/02/2013, 14h05

Salut

Je rejoins lvr pour sa remarque sauf que quand je vérifie le site avec le validateur, ça m'indique 2 erreurs:

line 167 column 97 - Erreur: document type does not allow element "a" here
line 180 column 34 - Erreur: document type does not allow element "div" here

Je parle toujours du code source de la demo.

Et puis concernant la méthode live utilisée vers la fin du code js, ça ne marche pas avec la nouvelle version de jQuery. J'ai dû charger la même version utilisé dans le tuto, à savoir: jQuery-1.4.1

**Bovino** · 10/02/2013, 19h00

Effectivement, le code jQuery de l'article n'est pas compatible avec les versions récentes de jQuery.
D'autre part, les code HTML était sémantiquement faux.

Une mise à jour de l'article a donc été faite passant l'exemple en HTML5 et rendant le code jQuery compatible avec les dernières versions.

**lvr** · 11/02/2013, 00h17

Excellente mise à jour !!!!

J'ai voulu faire une petite adaptation de manière à pouvoir commander l'ouverture et la fermeture de la popup par programmation.

Et là petit soucis.

Exemple pour la fermeture:

Dans mon fichier main.js principal :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
(function() {
 
    $('body').on('click', '#togglePage', function() {
        // 1) je ferme la popup
        closePopup();
        // 2) je fais le traitement
        var prevleftpage;
        var tmppage = pages.leftpagepanel().getPage();
        prevleftpage = new Page(tmppage.getIndex(), !tmppage.isDouble());
        pages.leftpagepanel().setPage(prevleftpage);
    });
}());

Dans mon fichier avec le js du popup

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
jQuery(function($) {
    //Lorsque vous cliquez sur un lien de la classe poplight
    // ...
    //Close Popups and Fade Layer
    $('body').on('click', 'a.close, #fade', function() {
        closePopup();
    });  //Au clic sur le body...
 
    function closePopup() {
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove();
        }); //...ils disparaissent ensemble
    }
});

L'appel du click du #togglePage ne retrouve pas closePopup().
Je suppose qu'il doit avoir un problème de scope de définition de la fonction...

Par contre la fermeture, via le bouton Close fonctionne.

**Bovino** · 11/02/2013, 08h00

Oui, c'est bien un problème de scope.
Tes deux codes se trouvent dans deux closures différentes, du coup, les fonctions de l'une sont inaccessibles depuis l'autre.
Regroupe ton code dans une seule closure et ça devrait mieux fonctionner.

D'autre part, un petit détail par rapport à la notation

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

(function(){...})();

là aussi, si tu utilises jQuery dedans, il est recommandé pour éviter tout conflit de transmettre l'objet jQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

(function($){...})(jQuery);

**lvr** · 12/02/2013, 10h58

Parfait. Merci.
C'est juste moins lisible d'avoir tout dans un grand fichier que dans plusieurs petits.

**alex5513** · 19/02/2013, 21h43

Bonjour à tous,
déjà merci pour ce tuto qui est super.

Alors moi j'ai mis un formulaire d'inscription dans ma fenêtre et j'aimerais savoir comment afficher les messages d'erreur des tests en javascript quand la personne remplie le formulaire. Je peux faire des alert() mais ce n'est pas très élégant, ça fait pop up sur pop up. j'aimerais savoir si c'est possible d'écrire dans la pop up.

Merci pour votre aide

edit: j'ai trouvé une solution : creer une <div id="erreur"> </div> avec rien dedans et dans la fonction javascript mettre document.getElementById('erreur').innerHTML = "Veuillez remplir correctement tous les champs *";

**yull27** · 06/03/2013, 16h40

Bon, j'ai voulu utiliser plusieurs popup et commander la fermeture de la popup ouverte en ouvrant une nouvelle.

voici le bout de code à rajouter dans le jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
//close pop up id
$('a.popclose').on('click', function() {
	var popID = $(this).data('close'); //Trouver la pop-up correspondante
	$('#' + popID).fadeOut();
	return false;
});

et rajouter data-close="id de la popup" dans le lien et
popclose dans la class class=" popclose poplight"

ex :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" data-width="450" data-rel="id popup2" data-close="id popup1" class="popclose poplight">mon texte</a>

Bon et voici le code jquery complet après qqles modifs et bugs d'affichage trouvés:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
jQuery(function($){
	//Lorsque vous cliquez sur un lien de la classe poplight
	$('a.poplight').on('click', function() {
		var popID = $(this).data('rel'); //Trouver la pop-up correspondante
		var popWidth = $(this).data('width'); //Trouver la largeur
 
		//Faire apparaitre la pop-up et ajouter le bouton de fermeture
		$('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close'+popID+'"><img src="/scripts/jquery/popuplight/close_pop.png" class="btn_close"/></a>');
 
		//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
		//Apply Margin to Popup
		$('#' + popID).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
 
		//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
		$('body').append('<div id="fade"></div>');
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
	//Close Popups and Fade Layer
	$('body').on('click', 'a.close'+popID+', #fade', function() { //Au clic sur le body...
		$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close'+popID+'').remove();  
	}); //...ils disparaissent ensemble
 
 
		return false;
	});
		return false;
	});
 
		//close pop up id
	$('a.popclose').on('click', function() {
		var popID = $(this).data('close');   //Trouver la pop-up correspondante
		$('#' + popID).fadeOut(function() {
			$('a.close'+popID+'').remove();  
	});
 
		return false;
	});
 
});

Allez, bizzzzzzzzzz! ^^

**malyana** · 11/03/2013, 12h05

Bonjour à toutes et à tous,

tout d'abord merci pour ce petit tuto qui est bien utile pour une débutante comme moi.
Tout fonctionne parfaitement mais je souhaiterais que la fenêtre se ferme seulement au clic sur l'image du bouton et non sur la fenêtre elle-même. J'ai bien vu ce message :"Si nous avions souhaité que seuls les clics sur les croix ferment les popups, alors nous aurions pu les encapsuler dans un élément commun et affecter la délégation sur cet élément." mais cela reste du chinois pour moi. Si une âme charitable voulait bien m'aider cela m'arrangerait beaucoup.
Je vous souhaite une bonne journée!
Ps: je suis restée sur la première version.

**lavm01** · 18/03/2013, 17h38

Bonjour,

J'ai créé le popup et il apparaît bien dans ma fenêtre mais comment fait-on pour que l'usager clique sur le X pour fermer le popup car présentement si je clique n'importe ou dans la fenêtre (sauf dans le popup) le popup se ferme.

Merci de me réponsre.

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

jQuery

Discussions similaires

Partager

Partager