Dans ce tutoriel, nous allons découvrir comment réaliser une fenêtre modale en HTML, CSS et JavaScript. Celle-ci s'affichera, lors du click sur un lien, à l'intérieur de la page et son contenu sera chargé directement en AJAX.

Créer la fenêtre

La création de la fenêtre est assez simple. Il suffit d'insérer un code en HTML en bas de page puis de lui donner un style bien particulier en CSS.

Code HTML

<div class="window-bg">
    <div class="window">
        <p class="window-title">Ma fenêtre modale</p>
        <div class="window-content"></div>
        <div class="window-buttons">
            <a href="" class="button window-close">Fermer</a>
        </div>
    </div>
</div>

La classe window-bg sera la fond tranlucide dans lequel sera inséré la fenêtre. Ce fond est nécessaire pour bien distinguer l'apparition de la fenêtre et la page.

L'élément window est la fenêtre en elle même. Elle dispose d'un titre (window-title), d'un contenu (window-content) et de boutons d'actions (window-buttons).

Code CSS

Il est important de masquer la fenêtre au chargement de la page, elle sera seulement affichée en javascript lors du click sur un lien.

Le fond est positionné avec la valeur fixed pour prendre une taille équivalente à celle du navigateur de l'utilisateur. Après quoi, la fenêtre prend une position absolute et se voit centré verticalement et horizontalement.

/* Fond de la fenêtre */
.window-bg {
    display: none; /* On cache la fenêtre à l'affichage de la page */
    position: fixed;
    left : 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0,0,0,0.75); 
}

/* Fenêtre */
.window-bg .window {
    position: absolute;
    left : 50%;
    top : 50%;
    width : 600px;
    background: #fff;
    color : #222;
    transform: translateX(-50%) translateY(-50%); /* Décaler vers le haut et à gauche de la moitié de la taille de la fenêtre */
}

/* Titre de la fenêtre */
.window-bg .window .window-title {
    background: #E74C3C;
    padding : 20px 0;
    font-weight: bold;
    text-align: center;
    color : #fff;
    text-transform: uppercase;
}

/* Contenu de la fenêtre */
.window-bg .window .window-content {
    padding : 40px;
}

/* Boutons de la fenêtre */
.window-bg .window .window-buttons {
    border-top : 2px solid #ccc;
    padding : 20px;
    text-align: center;
}
.window-bg .window .window-buttons .button {
    display: inline-block;
    padding : 10px 20px;
    background: #E74C3C;
    color : #fff;
    text-decoration: none;
    border-radius: 4px;
}

Faire fonctionner la fenêtre

Nous allons utiliser le JavaScript, à l'aide de jQuery, pour faire afficher notre fenêtre lors du click sur un lien.

Réaliser l'appel AJAX

Au click sur un lien disposant de la classe show-window, une fonction est appelée. Celle-ci va se charger d'appeler en AJAX l'attribut href du lien sur lequel l'utilisateur a cliqué. Après quoi, on insère le résutlat de la requêtre dans la fenêtre, puis on l'affiche.

$('a.show-window').click(function(e) {
    e.preventDefault(); // Empêche le navigateur de réaliser son action par défaut

    $.get($(this).attr('href'), function(data) {
        $('.window-bg .window-content').html(data);
        show_window();
    });

});

Pour afficher la fenêtre, on utilise la fonction show_window() que nous allons ajouter à notre fichier. Celle-ci se charge simplement d'afficher la fenêtre.

function show_window() {
    $('.window-bg').show();
}

Le processus va être globalement similaire pour fermer la fenêtre.

function close_window() {
    $('.window-bg').hide();
}

La fonction close_window() est appelée lors du click sur le bouton fermer à l'intérieur de la fenêtre.

$('.window-bg .window-close').click(function(e) {
    e.preventDefault();
    close_window();
});

Animer la fenêtre

Afin d'animer la fenêtre à l'affichage est à la fermeture, les deux fonctions show_window() et close_window() vont être légèrement modifiées.

Pour chacune, on définit d'abord les paramètres de base des éléments à animer puis on exécute l'animation via la fonction animate de jQuery.

function show_window() {
    $('.window-bg .window').fadeTo(0, 0).css('top', '40%'); // Remise à zéro des paramètres avant l'animation
    $('.window-bg').fadeIn(250); // Fondu du fond de la fenêtre
    $('.window-bg .window').animate({
        top: '50%',
        opacity: 1
    }, 250); // Animation de la fenêtre
}

function close_window() {
    $('.window-bg .window').fadeTo(0, 1).css('top', '50%'); // Remise à zéro des paramètres avant l'animation
    $('.window-bg').fadeOut(250); // Fondu du fond de la fenêtre
    $('.window-bg .window').animate({
        top: '40%',
        opacity: 0
    }, 250); // Animation de la fenêtre
}