Sponsors
Statistiques
Nb connectés : 12
Nb membres : 2187
Nb visiteurs :
Nb hits : 6653
Vous êtes ici : Accueil > Javascript > Effets > Créer facilement une shadow box

Trouver une ressource
Trouvez une ressource parmi les 92 tutoriaux, 294 messages d'aide etc...

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

Créer facilement une shadow box
Information sur le tutoriel
Créer facilement une shadow box

Catégorie : Effets
Niveau : Débutant
Auteur : pcleder
Publication : le 27/03/2010 à 08:47:38
Note : 5/5 | 1829 vues | 7 commentaires
(Mis à jour le 27/03/2010 à 08:49:52)
|
|
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> :
Code :
<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.

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;}
/*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
Les commentaires
Il y a 7 commentaire(s) déjà posté(s)

Commentaire de Adlook
Ajouter le 29/03/2010 à 09:47:29

Bonjour pcleder,
Je vous remercie pour votre tutoriel qui est très bien expliqué !!
Cependant, est-il possible de faire un effet de fade out lorsque l'on cache la div ? (lorsqu'on clique sur le bouton quitter)
Merci d'avance pour votre réponse,
Cordialement Adlook
Commentaire de pcleder
Ajouter le 29/03/2010 à 10:47:11

Bonjour et merci pour votre sympathique commentaire.
Pour répondre à votre question, il n'y a aucun souci.
Vous aurez remarqué que j'utilise la méthode hide() pour fermer la div et le masque :

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

Remplacez tout simplement la méthode par un fadeTo temporisé à votre goût.

Je reste à votre disposition.
Cordialement.

http://www.patrickcleder.com
Commentaire de Adlook
Ajouter le 29/03/2010 à 11:33:08

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>
<!--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>


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
Commentaire de pcleder
Ajouter le 29/03/2010 à 11:39:06

Rebonjour et désolé de m'être empressé dans ma réponse !
Il faut utiliser le fadeOut pour arriver à une disparition totale.
Essaye avec un fadeOut(500).
N'hésite pas si tu as d'autres soucis.
Patrick CLEDER.
NB : FadeTo positionne sur un taux de transparence mais ne fait pas disparaitre réellement l'objet.
Bye.
Commentaire de Adlook
Ajouter le 29/03/2010 à 11:53:58

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>
<!--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>


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

Commentaire de pcleder
Ajouter le 29/03/2010 à 11:59:22

Merci à vous et merci aussi à Webdezign.tutoriaux qui a su garder une certaine modestie et humilité contrairement à d'autres. Dans nos métiers, il faut toujours être modeste car nous serons toujours en retard d'un cran ! Un site efficace, agréable et convivial !

http://www.patrickcleder.com
Commentaire de kyrepo
Ajouter le 29/03/2010 à 13:05:00

Merci pcleder pour ce tutoriel simple et efficace.
Cela faisait maintenant 2-3 mois que je cherchais ce genre de fenêtre.
(En effet, c'est plus sympa avec le fade out ^^)

PS : Je suis d'accord avec vous, ce site est très agréable et très convivial.
Merci de bien vouloir nous donner votre avis sur ce tutoriel !
[ Pour cela vous devez être connecté avec votre compte ]