CodeS-SourceS
Rechercher un code, un tuto, une réponse

Concevez en quelques lignes votre shadow box en jquery

Octobre 2017

CONCEVOIR FACILEMENT UNE SHADOW BOX
  • CONSIGNES


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>
  • 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="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>


<--Présentation de la page-->


CONCEVOIR FACILEMENT UNE SHADOWBOX


Cliquez sur le bouton "Shadow box" pour produire l'effet escompté


Affichez le code source ou cliquez&nbsp;ici&nbsp;pour recevoir le tutoriel par mail.

    


<--Bouton de la page-->


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


<--La box-->


<center>    


Exemple de ShadowBox


Celle-ci peut vous servir dans de nombreuses situations comme


formulaire de contact ou d'authentification.


[Image:http://static.commentcamarche.net/codes-sources.commentcamarche.net/pictures/faq-6623ca9c4430d6872adff480ddde6679.png|500px||center]

Adresse d'origine

A voir également

Publié par pjcleder.
Ce document intitulé «  Concevez en quelques lignes votre shadow box en jquery  » issu de CodeS-SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Créez facilement une bannière animée en jquery !
Implémenter un lien "lire la suite..." à vos articles en jquery