[Article] Créez une fenêtre modale avec CSS et jQuery [Résolu] - Page 3

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

Citation:

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

Citation:

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:

Citation:

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.

11/01/2013, 13h51	#49
chris-toph Invité de passage christophe Développeur Web Inscription : janvier 2013 Messages : 1 Détails du profil Informations personnelles : Nom : christophe Localisation : Belgique Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2013 Messages : 1 Points : 1 Points : 1	soucis avec des area 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() ?
	00

13/01/2013, 21h29	#50
cédric20 Candidat au titre de Membre du Club Cédric Étudiant Inscription : avril 2011 Messages : 40 Détails du profil Informations personnelles : Nom : Cédric Localisation : France Informations professionnelles : Activité : Étudiant Informations forums : Inscription : avril 2011 Messages : 40 Points : 10 Points : 10	fade 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
	00

10/02/2013, 19h00	#53
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 134 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 134 Points : 64 920 Points : 64 920	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. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	10

11/02/2013, 08h00	#55
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 134 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 134 Points : 64 920 Points : 64 920	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); __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	10

11/03/2013, 12h05	#59
malyana Invité de passage Inscription : mars 2013 Messages : 1 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : mars 2013 Messages : 1 Points : 1 Points : 1	Fermeture à l'aide d'un bouton 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.
	00

05/09/2012, 13h35	#41
skybuck Invité régulier Inscription : juillet 2003 Messages : 44 Détails du profil Informations forums : Inscription : juillet 2003 Messages : 44 Points : 6 Points : 6	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
	00

17/09/2012, 18h46	#43
zebda Invité de passage Inscription : mars 2011 Messages : 6 Détails du profil Informations forums : Inscription : mars 2011 Messages : 6 Points : 3 Points : 3	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
	00

17/09/2012, 21h46	#45
zebda Invité de passage Inscription : mars 2011 Messages : 6 Détails du profil Informations forums : Inscription : mars 2011 Messages : 6 Points : 3 Points : 3	Merci Daniel, c'est la belgium attitude Je test cela est je te dis ca Merci encore, je commençais a désespérer
	00

22/09/2012, 16h12	#46
aks49 Invité de passage Antoine Inscription : septembre 2012 Messages : 1 Détails du profil Informations personnelles : Nom : Antoine Localisation : France, Maine et Loire (Pays de la Loire) Informations professionnelles : Secteur : Bâtiment Informations forums : Inscription : septembre 2012 Messages : 1 Points : 1 Points : 1	Ton tutoriel est vraiment top...Simple et Efficace ! Et un grand merci pour ton précédent code
	00

06/11/2012, 13h03	#47
JojoLalu Invité de passage Inscription : octobre 2012 Messages : 2 Détails du profil Informations forums : Inscription : octobre 2012 Messages : 2 Points : 2 Points : 2	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.
	00

12/02/2013, 10h58	#56
lvr Membre éprouvé Inscription : avril 2006 Messages : 610 Détails du profil Informations forums : Inscription : avril 2006 Messages : 610 Points : 494 Points : 494	Parfait. Merci. C'est juste moins lisible d'avoir tout dans un grand fichier que dans plusieurs petits.
	00

19/02/2013, 21h43	#57
alex5513 Invité de passage Inscription : février 2013 Messages : 1 Détails du profil Informations forums : Inscription : février 2013 Messages : 1 Points : 1 Points : 1	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 *";
	00

18/03/2013, 17h38	#60
lavm01 Candidat au titre de Membre du Club Inscription : novembre 2006 Messages : 37 Détails du profil Informations forums : Inscription : novembre 2006 Messages : 37 Points : 12 Points : 12	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email