Fenêtre modal jQuery

**okoweb** · 30/10/2012, 00h01

Salut,

Dans la plupart des boites modales que j'ai rencontrées, quand le modal est visible, il suffit de cliquer sur un espace vide autour du modal pour que ce dernier soit fermée.

Moi je voudrais que le modal soit fermée uniquement en cliquant sur un bouton, que le fait de cliquer sur la surface autour du modal, ne puisse pas fermer ce dernier.

Connaissez un widget modal disposant de cette fonctionnalité ? Sur mon projet actuel, j'utilise Twitter Bootstrap Modal. Si ce dernier dispose de cette fonctionnalité, merci de renseigner comment ça marche.

Merci d'avance...

**danielhagnoul** · 30/10/2012, 11h14

Bonjour

Si l'on reprend le code de mes exemples, il suffit de ne plus prendre en compte le clic sur le voile noir.

http://www.developpez.net/forums/d82...y/#post5830691

Code :

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

1
2
3
4
5
6
7
$("body").delegate(".popup-btn-close", "click", function(){
    $('.voile-noir , .popup-block').fadeOut(function(){
        $(".popup-btn-close, .voile-noir").remove();
    });
 
    return false;
});

http://www.developpez.net/forums/d82...y/#post6893343

Code :

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

1
2
3
4
5
6
7
$( "body" ).on( "click", ".popup-btn-close", function(){
   $( ".voile-noir , [class^='popup-block']" ).fadeOut( function(){
        $( ".popup-btn-close, .voile-noir" ).remove();
   });
 
   return false;
});

**okoweb** · 30/10/2012, 15h02

Envoyé par danielhagnoul

Code :

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

1
2
3
4
5
6
7
$( "body" ).on( "click", ".popup-btn-close", function(){
   $( ".voile-noir , [class^='popup-block']" ).fadeOut( function(){
        $( ".popup-btn-close, .voile-noir" ).remove();
   });
 
   return false;
});

Merci pour votre attention à mon souci.

Mais avec ce code, un problème est résolu. Le clic sur la zone autour du modal ne ferme plus la fenêtre, mais par contre le bouton de fermeture non plus ne ferme la fenêtre.

Merci d'avance...

**danielhagnoul** · 30/10/2012, 20h11

Voici le code de ma page de test qu'il suffit de copier-coller pour tester. Chez moi, cela fonctionne !

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
<!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.2.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(){
 
			$( "body" ).on( "click", ".popup-btn-close", function(){
			   $( ".voile-noir , [class^='popup-block']" ).fadeOut( function(){
			        $( ".popup-btn-close, .voile-noir" ).remove();
			   });
 
			   return false;
			});
        });
    </script>
</body>  
</html>

**okoweb** · 30/10/2012, 23h25

Ça marche super bien.

Et la compatibilité avec IE <= 8. Certains utilisateurs de mon appli sont encore sur XP service Pack 2 et service Pack 3. Cela sous entend firefox 3 et ie 6,7.

Merci d'avance...

**danielhagnoul** · 31/10/2012, 19h24

Bonsoir

Je ne sais pas, car depuis plus de 3 ans je n'utilise plus d'autres navigateurs que les dernières versions (mise à jour automatique) de Chrome et de Firefox.

Fenêtre modal jQuery

jQuery

Discussions similaires

Partager

Partager