Javascript - Créer facilement une shadow box

Créer facilement une shadow box

Créer facilement une shadow box

Par pcleder, publié le 27/03/2010 à 08:47:38

Une shadow box s'avérer utile pour vos formulaires de contact ou d'authentification et apporte un petit plus en terme de design. cette fenêtre modale apparait comme une pop-up et assombrit légèrement la page principale. Facile à mettre en oeuvre !

-CONSIGNES
Votre page doit être liée à la dernière version de jQuery (jquery-1.4.2.js)
Placez le code suivant entre les balises <head></head> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

-HTML, CSS & jQuery
Collez ce code dans l’éditeur de votre choix et enregistrez le avec une extension de type .html ou .php à la racine de votre site.

<!doctype html>

<html>

<head>

<title>Concevoir facilement une shadow box, jQuery</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style>

/*Style general de la page*/

body {font:14px verdana, sans-serif;background:#000000;color:#C0C0C0;font-weight:bold;}

/*Styles relatifs à la shadow box*/

/*Style du masque recouvrant la page au chargement de la shadow box*/

#page {position:absolute;left:0;top:0;z-index:9000;background-color:#000;display:none;}

/*Positionnement et dimensions de la shadow box*/

#boxes .window {position:absolute;left:0;top:0;width:440px;height:200px;display:none;z-index:9999;padding:20px;}

#boxes #dialog {width:375px;height:203px;padding:10px;color:#00008B;border:3px solid #fff;background-color:#C0C0C0;}

/*Style du bouton*/

.shadowbox{position:absolute;left:50%;top:50%;width:100px;}

</style>

<script type="text/javascript">

//Utilisé pour éviter le conflit avec d’autres plugins qui seraient liés

//à la page

jQuery.noConflict();



jQuery(document).ready(function() {

//Evénement lié au clic du bouton de la page

jQuery(".shadowbox").click(function() {

//Récupération des dimensions de la page

var xHeight = jQuery(document).height();

var xWidth = jQuery(window).width();

//Dimensionnement du masque recouvrant la page

jQuery("#page").css({"width":xWidth,"height":xHeight});

//Apparition du masque

jQuery("#page").fadeIn();

//Attribution à celui-ci d’une transparence de

//façon à laisser la page légèrement visible 

jQuery("#page").fadeTo("fast",0.6); 

var xH = jQuery(window).height();

var xW = jQuery(window).width();

//Centrage de la shadow box

jQuery("#dialog").css("top", xH/2-jQuery("#dialog").height()/2);

jQuery("#dialog").css("left", xW/2-jQuery("#dialog").width()/2);

//Apparition de la shadow box

jQuery("#dialog").fadeIn(); 



});

//Fermeture de la shadow box via le bouton qu’elle contient

jQuery(".window .close").click(function () {

jQuery("#page").hide();

jQuery(".window").hide(); 

}); 

}); 

</script>

</head>

<body>

<br>

<!--Bouton de la page-->

<input type="button" value="Shadow box" class="shadowbox" />

<!--Div incluant la box et le masque-->

<div id="boxes"/>

<!--La box-->

<div id="dialog" class="window"/>

<center> 

Exemple de ShadowBox 

<br>

Celle-ci peut vous servir dans de nombreuses situations comme

formulaire de contact ou d"authentification.

<br>

<input type="button" class="close" value="Quitter" />

</center>

</div>

<!--Le masque-->

<div id="page">

</div>

</div>

</body>

</html>

Page de démonstration :
http://www.patrickcleder.com/tuto_27.php

9 commentaires

Par le 29/03/2010 à 11:33:08 Note : 5/5

Un grand merci pour votre réponse pcleder !!

voici donc le résultat :

Code :

<!doctype html>
<html>
<head>
<title>Concevoir facilement une shadow box, jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
/*Style general de la page*/
body {
font:14px verdana, sans-serif;
background:#000000;
color:#C0C0C0;
font-weight:bold;
background-color: #0066CC;
}
/*Styles relatifs à la shadow box*/
/*Style du masque recouvrant la page au chargement de la shadow box*/
#page {position:absolute;left:0;top:0;z-index:9000;background-color:#000;display:none;}
/*Positionnement et dimensions de la shadow box*/
#boxes .window {position:absolute;left:0;top:0;width:440px;height:200px;display:none;z-index:9999;padding:20px;}
#boxes #dialog {width:375px;height:203px;padding:10px;color:#00008B;border:3px solid #fff;background-color:#C0C0C0;}
/*Style du bouton*/
.shadowbox{position:absolute;left:50%;top:50%;width:100px;}
</style>
<script type="text/javascript">
//Utilisé pour éviter le conflit avec d’autres plugins qui seraient liés
//à la page
jQuery.noConflict();

jQuery(document).ready(function() {
//Evénement lié au clic du bouton de la page
jQuery(".shadowbox").click(function() {
//Récupération des dimensions de la page
var xHeight = jQuery(document).height();
var xWidth = jQuery(window).width();
//Dimensionnement du masque recouvrant la page
jQuery("#page").css({"width":xWidth,"height":xHeight});
//Apparition du masque
jQuery("#page").fadeIn();
//Attribution à celui-ci d’une transparence de
//façon à laisser la page légèrement visible
jQuery("#page").fadeTo("fast",0.6);
var xH = jQuery(window).height();
var xW = jQuery(window).width();
//Centrage de la shadow box
jQuery("#dialog").css("top", xH/2-jQuery("#dialog").height()/2);
jQuery("#dialog").css("left", xW/2-jQuery("#dialog").width()/2);
//Apparition de la shadow box
jQuery("#dialog").fadeIn();

});
//Fermeture de la shadow box via le bouton qu’elle contient
jQuery(".window .close").click(function () {
//Disparition du transparent de la shadow box
jQuery("#page").fadeTo("fast",0);
//Disparition de la shadow box
jQuery("#dialog").fadeTo("fast",0);
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<br>

<input type="button" value="Shadow box" class="shadowbox" />

<div id="boxes"/>

<div id="dialog" class="window"/>
<center>
Exemple de ShadowBox
<br>
Celle-ci peut vous servir dans de nombreuses situations comme
formulaire de contact ou d"authentification.
<br>
<input type="button" class="close" value="Quitter" />
</center>
</div>

<div id="page">
</div>
</div>
</body>
</html>

Par contre j'ai un petit problème, en effet les div ne semblent pas cacher ce qui empêche l'utilisateur de re-cliquer sur le bouton "Shadow box" ! Comment éviter ce désagrément ?
Sachant que les lignes :
jQuery("#page").hide();
jQuery(".window").hide();

Empêchent la visibilité du fadeTo !

Encore merci pour votre réponse,
Cordialement Adlook

Par le 29/03/2010 à 11:53:58 Note : 5/5

Génial, ça fonctionne !!

Un grand MERCI pour vos réponses et votre script !
(Je sens l'expert en JQuery)

Voici le script final pour ceux que sa intéresse :

Code :

<!doctype html>
<html>
<head>
<title>Concevoir facilement une shadow box, jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
/*Style general de la page*/
body {
font:14px verdana, sans-serif;
background:#000000;
color:#C0C0C0;
font-weight:bold;
background-color: #0066CC;
}
/*Styles relatifs à la shadow box*/
/*Style du masque recouvrant la page au chargement de la shadow box*/
#page {position:absolute;left:0;top:0;z-index:9000;background-color:#000;display:none;}
/*Positionnement et dimensions de la shadow box*/
#boxes .window {position:absolute;left:0;top:0;width:440px;height:200px;display:none;z-index:9999;padding:20px;}
#boxes #dialog {width:375px;height:203px;padding:10px;color:#00008B;border:3px solid #fff;background-color:#C0C0C0;}
/*Style du bouton*/
.shadowbox{position:absolute;left:50%;top:50%;width:100px;}
</style>
<script type="text/javascript">
//Utilisé pour éviter le conflit avec d’autres plugins qui seraient liés
//à la page
jQuery.noConflict();

jQuery(document).ready(function() {
//Evénement lié au clic du bouton de la page
jQuery(".shadowbox").click(function() {
//Récupération des dimensions de la page
var xHeight = jQuery(document).height();
var xWidth = jQuery(window).width();
//Dimensionnement du masque recouvrant la page
jQuery("#page").css({"width":xWidth,"height":xHeight});
//Apparition du masque
jQuery("#page").fadeIn();
//Attribution à celui-ci d’une transparence de
//façon à laisser la page légèrement visible
jQuery("#page").fadeTo("fast",0.6);
var xH = jQuery(window).height();
var xW = jQuery(window).width();
//Centrage de la shadow box
jQuery("#dialog").css("top", xH/2-jQuery("#dialog").height()/2);
jQuery("#dialog").css("left", xW/2-jQuery("#dialog").width()/2);
//Apparition de la shadow box
jQuery("#dialog").fadeIn();

});
//Fermeture de la shadow box via le bouton qu’elle contient
jQuery(".window .close").click(function () {
//Disparition du transparent de la shadow box
jQuery("#page").fadeOut(500);
//Disparition de la shadow box
jQuery("#dialog").fadeOut(500);
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<br>

<input type="button" value="Shadow box" class="shadowbox" />

<div id="boxes"/>

<div id="dialog" class="window"/>
<center>
Exemple de ShadowBox
<br>
Celle-ci peut vous servir dans de nombreuses situations comme
formulaire de contact ou d"authentification.
<br>
<input type="button" class="close" value="Quitter" />
</center>
</div>

<div id="page">
</div>
</div>
</body>
</html>

A très bientôt sur le site,
Cordialement Adlook

Ajouter un commentaire

Informations sur le tutoriel