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

**lvr** · 19/03/2013, 09h53

Envoyé par lavm01

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.

C'est ici :

Code :

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

1
2
3
4
5
6
7
//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;
});

Dans $('#fade , .popup_block').live('click', function(), le "#fade" dit que si l'utilisateur click sur le fond alors il doit faire le fadeOut puis la suppression du fond et de la popup.

**beegees** · 02/06/2013, 13h53

Merci pour ce joli popup, je l'ai intégré à un de mes sites.

Question 1): est-il possible de mettre le bouton (croix) de fermeture au milieu de la popup (en la laissant à droite) au lieu d'en haut ?

Question 2) Est-il possible d'ajouter une barre de défilement ?

Merci d'avance pour l'aide.

bee

**Cassangel** · 29/08/2013, 16h03

Bonjour,
J'ai passé la matiné à essayer d'implanter le script dans ma page mais sa ne marche pas, rien ne se produit lorsque l'on clic et je n'ai pas d'erreurs dans ma page...
Voici mon code :

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
<link rel='stylesheet' href='css/gallerydisplay.css' type='text/css' media='all'/>
<link rel='stylesheet' href='css/popupgallery.css' type='text/css' media='all'/>
 
 
 
<?php
 
$sqlart="SELECT * FROM gallery_art WHERE cat_art=2";
$resultatart=mysql_query($sqlart);
 
 
echo '<div class="featured">';
 
        while($ligneart=mysql_fetch_assoc($resultatart)){
                $linkimg=$ligneart['imgmini_art'];
                $linkimglarge=$ligneart['imglarge_art'];
                $smalldescription=$ligneart['smalldescription_art'];
                $largedescription=$ligneart['description_art'];
                $widthart=$ligneart['width_art'];
                $i=1;
                
                        echo '
                                
                                <div class="entry">
                                        <a class="poplight" href="#?w='.$widthart.'" rel="popup'.$i.'" ><em></em>
                                        <img src="css/images/minigallery/'.$linkimg.'" alt="" />
                                        <span>'.$smalldescription.'</span>
                                        </a><strong></strong>
                                        </div>
                                        
                                <div id="popup'.$i.'" class="popup_block">
                                        <img src="'.$linkimglarge.'" />
                                        <p>'.$largedescription.'</p>
                                </div>
                        ';
                $i++;
        }; 
?>
 
</div>
<div class="cl">&nbsp;</div>
 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
	//When you click on a link with class of poplight and the href starts with a # 
	$('a.poplight[href^=?page=logo#]').click(function() {
		var popID = $(this).attr('rel'); //Get Popup Name
		var popURL = $(this).attr('href'); //Get Popup href to define size
 
		//Pull Query & Variables from href URL
		var query= popURL.split('?');
		var dim= query[1].split('&');
		var popWidth = dim[0].split('=')[1]; //Gets the first query string value
 
		//Fade in the Popup and add close button
		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="popup_close.png" class="btn_close" title="Close Window" alt="Close" /></a>');
 
		//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the 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
		});
 
		//Fade in Background
		$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 
 
		return false;
	});
 
 
	//Close Popups and Fade Layer
	$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
	  	$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();  
	}); //fade them both out
 
		return false;
	});
 
 
});
 
</script>

Merci de m'aider si vous le pouvez, je continue à chercher.

**Cassangel** · 29/08/2013, 17h15

J'ai réussi à trouver.

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
<link rel='stylesheet' href='css/gallerydisplay.css' type='text/css' media='all'/>
<link rel='stylesheet' href='css/popupgallery.css' type='text/css' media='all'/>
 
 
 
<?php
 
$sqlart="SELECT * FROM gallery_art WHERE cat_art=2";
$resultatart=mysql_query($sqlart);
 
 
echo '<div class="featured">';
$i=1;
        while($ligneart=mysql_fetch_assoc($resultatart)){
                $linkimgmini=$ligneart['imgmini_art'];
                $linkimglarge=$ligneart['imglarge_art'];
                $smalldescription=$ligneart['smalldescription_art'];
                $largedescription=$ligneart['description_art'];
                $widthart=$ligneart['width_art'];
                
                
                        echo '
                                
                                <div class="entry">
                                        <a class="poplight" href="#?w='.$widthart.'" rel="popup'.$i.'" ><em></em>
                                        <img src="css/images/minigallery/'.$linkimgmini.'" alt="" />
                                        <span>'.$smalldescription.'</span>
                                        </a><strong></strong>
                                        </div>
                                        
                                <div id="popup'.$i.'" class="popup_block">
                                        <img src="css/images/largegallery/'.$linkimglarge.'"/>
                                        <br/>
                                        <p>'.$largedescription.'</p>
                                </div>';
                $i++;
        }; 
?>
 
</div>
<div class="cl">&nbsp;</div>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
	//When you click on a link with class of poplight and the href starts with a # 
	$('a.poplight[href^=#]').click(function() {
		var popID = $(this).attr('rel'); //Get Popup Name
		var popURL = $(this).attr('href'); //Get Popup href to define size
 
		//Pull Query & Variables from href URL
		var query= popURL.split('?');
		var dim= query[1].split('&');
		var popWidth = dim[0].split('=')[1]; //Gets the first query string value
 
		//Fade in the Popup and add close button
		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="popup_close.png" class="btn_close" title="Close Window" alt="Close" /></a>');
 
		//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the 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
		});
 
		//Fade in Background
		$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 
 
		return false;
	});
 
 
	//Close Popups and Fade Layer
	$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
	  	$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();  
	}); //fade them both out
 
		return false;
	});
 
 
});
 
</script>

**drogba72** · 14/02/2014, 09h52

Bonjour à tous,

D'abord, merci pour cette très jolie fenêtre, ainsi que son code (excellent M. danielhagnoul)

J'aurais une petite question car je tourne en rond sur mon problème.
Dans mon popin, se trouve un tableau où l'utilisateur peut rajouter des lignes comme il l'entend.

Cela engendre un soucis en soit..., mon popin s'agrandit autant de fois qu'il y a de ligne et on finit par ne plus voir le bas de celui ci...

Y aurait-il un moyen de mettre une taille maximale au popin à ne pas dépasser et si c'est le cas faire apparaitre une scrollbar ?

Merci par avance

**Abyssale** · 18/11/2014, 16h51

Bonjour tout le monde,

Allez, gros déterrage de post !

Ce code est parfait, (presque) juste ce qu'il me fallait...

Ce que je ne parviens pas à faire, c'est que lorsque cette popup s'ouvre, son contenu soit celui d'une page quelconque, disons page.php, qui s'y charge au moment de l'ouverture du popup.

Est-ce possible et si oui comment ?

Merci beaucoup.

**lalame93** · 09/06/2015, 00h17

Bonsoir, apres un premier test fonctionnel sur une page vierge j'ai voulu intégré le pop up dans mon site mais quand celle ci s'affiche elle reste sombre et n'est pas éclairé.

voilà mon code :

Code php :

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="popup.js"></script>
<link href="css/nos_formation.css" rel="stylesheet" type=<style > <type="text/css">
 
<title>Nos formations</title>
</head>
 
<body>
<?php 
if (!isset($_SESSION['id'])) {
require_once("header.php");
}
 else if ( $_SESSION['privilege'] == 1 ) {
	include ("header-client.php");
} else if ( $_SESSION['privilege'] == 0 ) {
	echo 'Votre compte n\' est pas encore actif, veuillez confirmer votre inscription au sein de l\'école. Merci.';	
	$_SESSION = array();
session_destroy();
}
else if ( $_SESSION['admin'] and $_SESSION['privilege'] == 2 ) {
	include ("header-admin.php");
}
 ?>
 <div class="page animated zoomIn" >
 <a href="#" data-width="500" data-rel="popup1" class="poplight">Voir la pop-up - Width = 500px</a>
 <article>
 
 
<?php
 
$requete2= $bdd->query( 'SELECT * FROM categorie ' ); 
 
while($donnees2=$requete2->fetch()) {      //print_r($nuple);
?>
<h1> <?php echo ($donnees2['nom_categorie']); ?></h1>
<?php   $id= $donnees2['id_categorie'];
		$requete= $bdd->query( "SELECT * FROM formation where id_categorie='$id' " ); 	
			while($donnees=$requete->fetch()) {    ?>
<div class="bloc">
<h2><?php  
echo ($donnees['nom_formation']); ?>  </h2>
<p> <?php echo  ('Prix :' .$donnees['prix'] .' DA'); ?></p>
 
 
</div>
<?php } ?>
<div class="clear"> </div>
<?php }
?>
<div id="popup1" class="popup_block">
	<h2>Developpez.com</h2>
	<p>Soh Tanaka est traduit sur developpez.com.</p>
 
</div>
</article>
</div>
</body>
</html>

le css :

Code css :

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
@charset "utf-8";
@font-face { 
  font-family: 'enzo-light'; 
  src:url(../font/enzo-light.otf);
}
@font-face { 
  font-family: 'enzo-med';
  src:url(../font/enzo-med.otf);
}
body {
	font-family:'enzo-light';
	background: #f6f6f6 url(../image/dc.png) repeat;
}
.bloc {
	display:inline;
    width:180px;
	float:left;
	margin-right:30px;
	text-align:center;
	margin-bottom:30px;
}
.clear {
	clear:both;
}
.page {
	position:absolute;
	float:right;
	left:240px;
	top:0px;
	bottom:0px;
	right:0px;
}
article {
	background-color:#FFFFFF;
	width:840px;
	margin:10px auto;
	padding:15px;
}
h1 {
	color:#00aaf0;
}
#fade { /*--Masque opaque noir de fond--*/
	display: none; /*--masqué par défaut--*/
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
.popup_block{
	display: none; /*--masqué par défaut--*/
	background: #fff;
	padding: 20px;
	border: 20px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	/*--Les différentes définitions 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;
}
/*--Gérer la position fixed pour IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}

Merci de votre aide.

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

jQuery

Discussions similaires

Partager

Partager