CONCEVOIR FACILEMENT UNE SHADOW BOX
Votre page doit être liée à la dernière version de jQuery (jquery-1.4.2.js)
Si ce n’est pas le cas, vous pouvez télécharger ce fichier sur http://api.jquery.com/
Ensuite, placez le code suivant entre les balises <head></head> : <script type="text/javascript" src="jquery-1.4.2.js"></script>
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="jquery-1.4.2.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>
<--Présentation de la page-->
<font style="color:#FFFF00">CONCEVOIR FACILEMENT UNE SHADOWBOX</font><br>
<font style="color:#FFFFFF">Cliquez sur le bouton "Shadow box" pour produire l'effet escompté</font><br>
Affichez le code source ou cliquez <a href="newsletter.php" style="color:#FFFF00;text-decoration:none">ici</a> pour recevoir le tutoriel par mail.<br><br>
<br>
<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>
<a>Celle-ci peut vous servir dans de nombreuses situations comme
formulaire de contact ou d'authentification.
<br>
<br>
<img src="/catalogue/tasse.jpg" <br>
<br>
<input type="button" class="close" value="Quitter" />
</center>
</div>
<--Le masque-->
<div id="page">
</div>
</div>
<br>
</body>
</html>
Page de démonstration : http://www.patrickcleder.com/tuto_27.php