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»