/*** * Fonctions Utilitaires * Version: 2014-12-02 par Francis Chevalier */ /*** * Fonction permettant de créer une fenêtre personalisée. * Options disponibles: * id: Le ID du div qui représente le modal/popup * title: Le titre qui sera inscrit dans l'en-tête du modal * message: Le message qui sera affiché dans le corps du modal * width: La largeur du modal (en pixels) * min_width: La largeur minimale de la fenêtre (en pixels) * max_width: La largeur maximale de la fenêtre (en pixels) * height: La hauteur du modal (en pixels) * buttons: Les boutons disponibles en bas de la fenêtre */ function createModal(options) { options.id = options.id || "modal"; options.title = options.title || ""; options.message = options.message || ""; options.width = (options.width ? options.width + "px" : "auto"); options.min_width = (options.min_width ? options.min_width + "px" : ""); options.max_width = (options.max_width ? options.max_width + "px" : ""); options.height = (options.height ? options.height + "px" : "auto"); options.buttons = options.buttons || [modalButton({label: "Ok"})]; // On vérifie si le modal ayant de ID existe déjà, si oui, on le supprime if ($("#" + options.id) != null && $("#" + options.id).length != 0) { $("#" + options.id).remove(); } // On vérifie si le container existe déjà, si ce n'est pas le cas, on le crée if ($("#modal-container") == null || $("#modal-container").length == 0) { // Les styles pour le container sont définis dans le fichier CSS style.css $("body").append(''); } else { // Pour l'instant, c'est un seul modal à la fois $("#modal-container").remove(); $("body").append(''); } // On concatène les boutons pour en faire une string var buttons = ""; for (var index = 0; index < options.buttons.length; ++index) { buttons += options.buttons[index]; } // Ensuite, on ajoute notre fenêtre à l'intérieur du container $("#modal-container").append( ''); // Pour cacher la barre de défilement sans décaler le contenu $('body').width($('body').width()); $('body').css('overflow', 'hidden'); $('#modal-container').fadeIn(); } /* Fonction qui ferme la fenêtre et le container si ce dernier est vide */ closeModal = function(btn) { $(btn).closest(".modal-custom").remove(); //if ($("#modal-container").html().trim() == "") { $("#modal-container").remove(); $('body').css('overflow', 'auto'); // On remet la barre de défilement //} } /* Crée une fenêtre simple avec un titre, un message et un bouton Ok */ function createSimpleModal(title, message) { createModal({ "title": title, "message": message, "min_width": 300, "max_width": 500 }); } /*** * Fonction qui retourne un bouton HTML, les options disponibles sont: * id: Le ID du bouton * label: Le texte dans le bouton (vide par défaut) * click: La méthode appelée par l'évènement onclick du bouton (aucune par défaut) * dismiss: Si le bouton ferme le modal après le click (vrai par défaut) */ function modalButton(options) { options.id = options.id || ""; options.label = options.label || ""; options.click = options.click || ""; options.dismiss = (typeof options.dismiss === 'undefined') ? true : options.dismiss; return ''; }