[jQuery] Une fenêtre modale

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:

  1. 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.
  2. 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.<br />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 !

3 réflexions au sujet de « [jQuery] Une fenêtre modale »

  1. 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)

Laisser un commentaire