Popup avec jQuery : .dialog()

Avec jQuery, la méthode .dialog() permet de transformer une simple division en boîte de dialogue, aussi appelée popup.

La boîte de dialogue peut se décliner en différentes versions :

  • boîte avec un bouton OK;
  • boîte avec des boutons qui mèneront à différentes actions, comme par exemple une boîte de confirmation avec un bouton Oui qui mène à la suppression d'un enregistrement et un bouton Non qui annule l'opération;
  • boîte qui s'affiche pendant quelques secondes avant de disparaître;
  • boîte qui apparaît quand on passe la souris sur un élément et qui disparaît quand la souris quitte cet élément;
  • etc.

▼Publicité

Puisque plusieurs pages pourraient avoir besoin d'afficher un popup, et afin de respecter le principe DRY (DRY principle : Do Not Repeat Yourself, ou, en français, ne vous répétez pas), il est préférable de placer le code JavaScript dans une bibliothèque de fonctions.

Voici donc une liste de fonctions qui permettent de générer différentes boîtes de dialogue.

En prime, la boîte de dialogue avec bouton OK est déclinée en trois versions : une stylisée pour les messages d'information, une pour les avertissement et une autre pour les erreurs.

jQuery

// Affiche un popup d'information et l'usager doit cliquer sur OK pour le refermer

// source : http://christianelagace.com

// Paramètre : le texte du message qui sera affiché dans le popup

// Retourne une référence à la boîte de dialogue

 

function afficherPopupInformation(message) {

    // crée la division qui sera convertie en popup

    $('body').append('<div id="popupinformation" title="Information"></div>');

    $("#popupinformation").html(message);

 

    // transforme la division en popup

    var popup = $("#popupinformation").dialog({

        autoOpen: true,

        width: 400,

        dialogClass: 'dialogstyleperso',

        buttons: [

            {

                text: "OK",

                "class": 'ui-state-information',

                click: function () {

                    $(this).dialog("close");

                    $('#popupinformation').remove();

                }

            }

        ]

    });

 

    // ajouter le style à la barre de titre

    // note : on n'utilise pas .dialogClass dans la définition de la boîte de dialogue car mettrait tout le fond en couleur

    $("#popupinformation").prev().addClass('ui-state-information');

 

    return popup;

}

 

// Affiche un popup d'avertissement et l'usager doit cliquer sur OK pour le refermer

// source : http://christianelagace.com

// Paramètre : le texte du message qui sera affiché dans le popup

// Retourne une référence à la boîte de dialogue

 

function afficherPopupAvertissement(message) {

    // crée la division qui sera convertie en popup 

    $('body').append('<div id="popupavertissement" title="Avertissement"></div>');

    $("#popupavertissement").html(message);

 

    // transforme la division en popup

    var popup = $("#popupavertissement").dialog({

        autoOpen: true,

        width: 400,

        dialogClass: 'dialogstyleperso',

        buttons: [

            {

                text: "OK",

                "class": 'ui-state-warning',

                click: function () {

                    $(this).dialog("close");

                    $('#popupavertissement').remove();

                }

            }

        ]

    });

 

    $("#popupavertissement").prev().addClass('ui-state-warning');

 

    return popup;

}

 

// Affiche un popup d'erreur et l'usager doit cliquer sur OK pour le refermer

// source : http://christianelagace.com

// Paramètre : le texte du message qui sera affiché dans le popup

// Retourne une référence à la boîte de dialogue

 

function afficherPopupErreur(message) {

    // crée la division qui sera convertie en popup

    $('body').append('<div id="popuperreur" title="Erreur"></div>');

    $("#popuperreur").html(message);

 

    // transforme la division en popup

    var popup = $("#popuperreur").dialog({

        autoOpen: true,

        width: 400,

        dialogClass: 'dialogstyleperso',

        buttons: [

            {

                text: "OK",

                "class": 'ui-state-error',

                click: function () {

                    $(this).dialog("close");

                    $('#popuperreur').remove();

                }

            }

        ]

    });

 

    $("#popuperreur").prev().addClass('ui-state-error');

 

    return popup;

}

 

// Affiche un popup d'information qui se refermera automatiquement après 3 secondes

// source : http://christianelagace.com

// Paramètre : le texte du message qui sera affiché dans le popup

// Retourne une référence à la boîte de dialogue

 

function afficherPopupInformationTroisSecondes(message) {

    // crée la division qui sera convertie en popup

    $('body').append('<div id="popuptroissecondes" title="Information"></div>');

    $("#popuptroissecondes").html(message);

 

    // transforme la division en popup

    var popup = $("#popuptroissecondes").dialog({

        autoOpen: true,

        width: 400,

        dialogClass: 'dialogstyleperso',

        hide: "fade",

        open: function (event, ui) {

            setTimeout(function () {

                $("#popuptroissecondes").dialog('close');

                $("#popuptroissecondes").remove();

            }, 3000);

        }

    });

 

    $("#popuptroissecondes").prev().addClass('ui-state-information');

 

    return popup;

}

 

// Crée un popup qui se s'affichera et se refermera automatiquement sur le hover d'un élément HTML.

// source : http://christianelagace.com

// Paramètres : sélecteur pour retrouver l'élément qui servira à faire afficher le popup

//              titre du popup

//              message du popup

// Retourne une référence à la boîte de dialogue

// Utilisation : definirPopupHover('.iconeaide', 'Aide', 'Texte à afficher');

 

function definirPopupHover(selecteur, titre, message) {

    // crée la division qui sera convertie en popup si n'existait pas déjà

    if ($("#popuphover").length == 0) {

        $('body').append('<div id="popuphover" title="Information"></div>');

    }

    $("#popuphover").html(message);

 

    // transforme la division en popup

    var popup = $("#popuphover").dialog({

        autoOpen: false,

        width: 400,

        dialogClass: 'dialogstyleperso',

        hide: "fade",

    });

 

    $("#popuphover").prev().addClass('ui-state-neutral');

 

    $(selecteur).hover(function (event) {

        // positionner le coin supérieur gauche du popup sur le coin inférieur droit de l'élément sur lequel on a passé la souris

        $("#popuphover").dialog('option',  'position', { my: "left top", at: "right bottom", of: event.target });

        $("#popuphover").dialog('open');

    }, function () {

        $("#popuphover").dialog('close');

    })

 

    return popup;

}

 

// Affiche un popup pour indiquer que le travail progesse.

// Devra être effacé en appelant effacerPopup().

// source : http://christianelagace.com

// Paramètres : le texte apparaissant dans la barre de titre. Par défaut : "Travail en cours"

//              le texte du message qui sera affiché dans le popup. Par défaut : "Un instant S.V.P."

// Retourne une référence à la boîte de dialogue

// Utilisation : var popupAttente = afficherPopupAttente();

 

function afficherPopupAttente(titre='Travail en cours', message='Un instant S.V.P.') {

    // crée la division qui sera convertie en popup

    $('body').append('<div id="popupattente" title="' + titre + '"></div>');

    $("#popupattente").html(message);

 

    // transforme la division en popup

    var popup = $("#popupattente").dialog({

        autoOpen: true,

        width: 400,

        dialogClass: 'dialogstyleperso',

        hide: "fade"

    });

 

    $("#popupattente").prev().addClass('ui-state-information');

 

    return popup;

}

 

// Efface un popup.

// source : http://christianelagace.com

// Paramètre : référence au popup créé à l'aide de .dialog()

 

function effacerPopup(popup) {

    $(popup).dialog("close");

    $('#popupattente').remove();

}

 

// À partir d'un lien <a href>, affiche un popup de confirmation et l'usager doit cliquer sur oui ou sur non.

// Le oui redirige vers la page spécifiée dans l'attribut href du lien

// alors que le non referme la boîte de dialogue sans rien modifier.

// source : http://christianelagace.com

// Paramètres : question : le texte de la question qui sera affichée dans le popup

//              lien (optionnel) : référence au lien qui cause l'affichage du popup

//                                 On y lira l'attribut href pour savoir quelle page afficher sur un oui.

//                                 Si non spécifié ou si le lien n'a pas d'attribut href, réaffichera la page actuelle.

// Retourne une référence à la boîte de dialogue

 

// Utilisation : afficherPopupConfirmationLien('Désirez-vous vraiment supprimer cet item ?', this);

 

function afficherPopupConfirmationLien(question, lien) {

    // crée la division qui sera convertie en popup

    $('body').append('<div id="popupconfirmation" title="Confirmation"></div>');

    $("#popupconfirmation").html(question);

 

    // transforme la division en popup

    var popup = $("#popupconfirmation").dialog({

        autoOpen: true,

        width: 400,

        dialogClass: 'dialogstyleperso',

        hide: "fade",

        buttons: [

            {

                text: "Oui",

                class: "ui-state-question",

                click: function () {

                    $(this).dialog("close");

                    var hrefdefini = false;

                    

                    if (lien != null) {

                        if ($(lien).attr("href") != undefined) {

                            hrefdefini = true;

                            // affiche la page de l'attribut href

                            window.location.href = $(lien).attr("href");

                        }

                    }

               

                    if (!hrefdefini) {

                        // réaffiche la page actuelle

                        window.location.reload();

                    }

 

                    $("#popupconfirmation").remove();

 

                }

            },

            {

                text: "Non",

                class: "ui-state-question",

                click: function () {

                    $(this).dialog("close");

                    $("#popupconfirmation").remove();

                }

            }

        ]

    });

 

    $("#popupconfirmation").prev().addClass('ui-state-question');

 

    return popup;

}

Les règles CSS suivantes permettent de styliser différentes boîtes de dialogue. De plus, aucune image n'est nécessaire pour obtenir le résultat escompté.

CSS

.dialogstyleperso .ui-state-information {

    border: 1px solid #2c2f81;

    background: #3774a0;   /* bleu - pour anciens navigateurs */

    background: -moz-linear-gradient(top, #3774a0 0%, #3774a0 55%, #316e9b 57%, #316e9b 100%); /* FF3.6-15 */

    background: -webkit-linear-gradient(top, #3774a0 0%,#3774a0 55%,#316e9b 57%,#316e9b 100%); /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, #3774a0 0%,#3774a0 55%,#316e9b 57%,#316e9b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3774a0', endColorstr='#316e9b',GradientType=0 ); /* IE6-9 */

    color: #ffffff;

    padding: 2px 6px;

    border-radius: 5px;

}

 

.dialogstyleperso .ui-state-warning {

    border: 1px solid #e36802;

    background: #fd8119;   /* orangé - pour anciens navigateurs */

    background: -moz-linear-gradient(top, #fd8119 0%, #fd8119 55%, #f8790f 57%, #f8790f 100%); /* FF3.6-15 */

    background: -webkit-linear-gradient(top, #fd8119 0%,#fd8119 55%,#f8790f 57%,#f8790f 100%); /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, #fd8119 0%,#fd8119 55%,#f8790f 57%,#f8790f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd8119', endColorstr='#f8790f',GradientType=0 ); /* IE6-9 */

    color: #ffffff;

    padding: 2px 6px;

    border-radius: 5px;

}

 

.dialogstyleperso .ui-state-error {

    border: 1px solid #cd0a0a;

    background: #c71515;   /* rouge framboise - pour anciens navigateurs */

    background: -moz-linear-gradient(top, #c71515 0%, #c71515 55%, #b71d1d 57%, #b71d1d 100%); /* FF3.6-15 */

    background: -webkit-linear-gradient(top, #c71515 0%,#c71515 55%,#b71d1d 57%,#b71d1d 100%); /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, #c71515 0%,#c71515 55%,#b71d1d 57%,#b71d1d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c71515', endColorstr='#b71d1d',GradientType=0 ); /* IE6-9 */

    color: #ffffff;

    padding: 2px 6px;

    border-radius: 5px;

}

 

.dialogstyleperso .ui-state-question,

.dialogstyleperso .ui-state-neutral {

    border: 1px solid #d4ccb0;

    background: #f6f4ed;   /* beige - pour anciens navigateurs */

    background: -moz-linear-gradient(top, #f6f4ed 0%, #f6f4ed 55%, #f0ede1 57%, #f0ede1 100%); /* FF3.6-15 */

    background: -webkit-linear-gradient(top, #f6f4ed 0%,#f6f4ed 55%,#f0ede1 57%,#f0ede1 100%); /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, #f6f4ed 0%,#f6f4ed 55%,#f0ede1 57%,#f0ede1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f4ed', endColorstr='#f0ede1',GradientType=0 ); /* IE6-9 */

    padding: 2px 6px;

    border-radius: 5px;

}

 

.dialogstyleperso .ui-dialog-titlebar-close {

    top: 12px;

}

 

.dialogstyleperso .ui-dialog-titlebar-close::before {

    content: "\274c";

    font-weight: bold;

    font-size: 0.8em;

}

Les boîtes de dialogue obtenues ressembleront à ceci (les styles peuvent différer selon le thème de base que vous aurez choisi pour vos dialogues).

À vous d'adapter les couleurs à vos besoins !

Popup d'information Popup d'avertissement Popup d'erreur Popup de confirmation

Exemple d'utilisation

Voici un exemple d'utilisation de la fonction afficherPopupConfirmationLien().

Ce qu'il y a de particulier dans cette fonction, c'est qu'elle reçoit en paramètre une référence au lien qui a servi à afficher la boîte de dialogue.

jQuery

$(function() {

    // comportement du bouton devant ouvrir la boîte de dialogue

    $( ".boutonsupprimer" ).click(function(event) {

        event.preventDefault();

        afficherPopupConfirmationLien('Désirez-vous vraiment supprimer cet item ?', this);

    });

});

Grâce à cette référence, le code mènera vers le bon URL dans un tableau contenant un lien de suppression pour chaque ligne de données.

HTML

<table>

   <tr>

      <td><a href='supprimeritem.php?id=1' class='boutonsupprimer'>Supprimer</a></td>

      <td>Premier item</td>

   </tr>

   <tr>

      <td><a href='supprimeritem.php?id=2' class='boutonsupprimer'>Supprimer</a></td>

      <td>Deuxième item</td>

   </tr>

   <tr>

      <td><a href='supprimeritem.php?id=3' class='boutonsupprimer'>Supprimer</a></td>

      <td>Troisième item</td>

   </tr>

</table>

Pour plus d'information

« Dialog Widget ». jQuery UI. http://api.jqueryui.com/dialog/

« The Dialog in jQuery User Interface 1.7 ». Packt. http://www.packtpub.com/article/dialog-in-jquery-user-interface-1.7-1

« Des boîtes de dialogue ». Open classrooms. http://fr.openclassrooms.com/informatique/cours/simplifiez-vos-developpements-javascript-avec-jquery/des-boites-de-dialogue

« Creating dialogs ». jQuery mobile. http://demos.jquerymobile.com/1.1.1/docs/pages/page-dialogs.html

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories