Bonjour à tous, aujourd’hui nous allons voir comment réaliser une fenêtre modale en jQuery.
Qu’est-ce que c’est ?
Wikipédia donne la définition suivante:
Une fenêtre modale est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et de l’écran. Elle est en général associée à une question à laquelle il est impératif que l’utilisateur réponde avant de poursuivre, ou de modifier quoi que ce soit.
Comme une démonstration vaut mieux qu’un long discours, j’ai mis en place une page de test.
Principe
Le principe utilisé ici est très simple:
- on place une div au-dessus de la page, grace à un z-index élevé. Cette div permet de masquer et de bloquer toute interaction avec le reste du document.
- on rajoute au-dessus de cette div une autre div faisant office de «fenêtre»
Le code
CSS
/* Le masque */
#mask {
z-index: 250;
background-color: #000000;
position: fixed;
left: 0;
top: 0;
}
/* La fenêtre */
#modal {
z-index: 500;
position: absolute; /* Important, sinon la fenêtre ne pourra pas être centrée ! */
padding: 8px;
background-color:#ffffff;
}
/* Des z-index élevés permettent à nos deux nouvelles div de se positionner au-dessus. */
jQuery
$('body').append('<div id="mask"></div>');
//On récupère les dimensions de l'écran
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Règle les dimension du masque afin de remplir tout l'écran
$('#mask').css({'width':maskWidth,'height':maskHeight});
//Effet de transition
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
$('body').append('<div id="modal">Bonjour, je suis une fenêtre modale. Cliquez sur le masque pour me refermer.</div>');
//Récupère les dimensions de la fenêtre du navigateur
var winWidth = $(window).width();
var winHeight = $(window).height();
//Récupère les dimensions de la fenêtre modale
var mWidth = $('#modal').width();
var mHeight = $('#modal').height();
//Positionne la fenêtre modale au milieu de la fenêtre du navigateur
var mTop = winHeight/2 - mHeight/2;
var mLeft = winWidth/2 - mWidth/2;
$('#modal').css({'top': mTop, 'left': mLeft});
$('#mask').click(function(){
$('#modal').remove();
$('#mask').remove();
});
Et voilà ! J’espère vous avoir été encore utile, et vous dit à bientôt pour de nouvelles aventures codesques !
Parfait ! Merci beuacoup !
Superbe une fenetre en 2 minutes ! Il faut juste rajouter dans le script, que la fenetre s’affiche au clic de #call (cf les codes sources de la page demo)
Oui, j’ai effectivement oublié de preciser qu’il faut placer mon code dans un
$('#truc').click(), mais j’estime que cela est sous-entendu.