Comment générer un popup en utilisant JQuery ?

Avec la librairie JavaScript, il est possible de créer son propre système de popup, ou bien de faire appel à des librairies externes conçues dans ce but.

Les fenêtres popup sont des fenêtres qui s'affichent par-dessus un site internet pour informer l'utilisateur et focaliser son attention sur un élément (avertissement, images, formulaire...). Avec la librairie JQuery, il est possible de créer son propre système de popup, ou bien de faire appel à des librairies externes conçues dans ce but.

Il faut tout d'abord définir les propriétés CSS de la fenêtre. Les propriétés minimales obligatoires sont display:none afin que la fenêtre soit masquée par défaut et la propriété z-index:50, pour positionner la fenêtre par-dessus tous les autres éléments de la page quand elle apparaît. Les propriétés position, padding, margin vont positionner la popup pour qu'elle s'affiche juste en dessous du lien sur lequel on clique. La classe .selected va modifier la façon dont le lien est affiché lorsque la popup est ouverte.

.contenu 
{
 background-color:#FFFFFF;
 border:1px solid #999999;
 cursor:default;
 display:none;
 margin-top: 15px;
 position:absolute;
 text-align:left;
 width:400px;
 z-index:50;
 padding: 25px 25px 20px;
}
a.selected {
 background-color:#1F75CC;
 color:white;
 z-index:100;
}

Le code HTML comprend la fenêtre popup et un lien pour afficher cette fenêtre. Le contenu peut être un simple message, un formulaire ou une image par exemple. La fenêtre popup est une balise <div>.

<div class=contenu popup>
 <p>Ce message va être affiché dans la popup.</p>
 <p><a class=close href=/>Fermer la fenêtre</a></p>
</div>
<a href=/popup id=afficherPopup>Afficher la fenêtre</a>

Le code JavaScript représente le coeur du fonctionnement de la popup. La fonction slideFadeToggle va être la fonction qui sera utilisée pour afficher la popup. Elle fait appel à la fonction animate() de la librairie JQuery qui permet de définir une animation qui va afficher la popup. Utilisez la fonction slideFadeToggle sur l'évènement clic du lien Afficher la popup. Une fonction nommée deselect va être utilisée pour fermer la popup puis enlever la classe selected au lien. Elle sera appelée soit en cliquant sur le lien Afficher la fenêtre lorsque la popup est ouverte, soit dans la fonction appelée lors du clic sur le lien Fermer la fenêtre.

//Fonction utilisée pour fermer la popup et enlever la classe selected sur le lien
function deselect(e) {
 $('.pop').slideFadeToggle(function()
 {
 e.removeClass('selected');
 }); 
}
$(function()
{
 //Fonction appelée lorsque l'on clique sur le lien Afficher la fenêtre
 $('#afficherPopup').on('click', function()
 {
 if($(this).hasClass('selected'))
 {
 deselect($(this)); 
 }
 else
 {
 $(this).addClass('selected');
 $('.pop').slideFadeToggle();
 }
 return false;
 });
 //Fonction appelée lorsque l'on clique sur le lien Fermer la fenêtre
 $('.close').on('click', function()
 {
 deselect($('#afficherPopup'));
 return false;
 });
});
//Fonction d'animation de la fenêtre. Elle permet d'afficher ou de masquer la fenêtre
$.fn.slideFadeToggle = function(easing, callback)
{
 return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};

La bibliothèque JQuery permet de développer d'autres plugins. Certains permettent d'utiliser une popup. La librairie JQuery UI ajoute des effets graphiques à JQuery. Elle propose son propre système de popup, les Dialog. Ces fenêtres sont entièrement paramétrables.

$('#afficherPopup').on('click', function()
{
 $(#popup).dialog();
}

Il existe d'autres plugins ajoutant des fenêtres popup. C'est par exemple le cas de ColorBox ou Magnific Popup.

JQuery