đź”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

lis.modal.js is a simple yet robust, multifunctional JQuery modal popup plugin which can be used for notification popups and alert/confirm/prompt dialog boxes.

Modal Notification alert confirm popup Dialog prompt

Documentation

Un simple module jQuery pour ajouter facilement des modals dans son code JS

Installation

<!-- Incure jQuery --> <script src="/js/jquery.min.js"></script>  <!-- jQuery Modal --> <script type="text/javascript" src="js/lis.modal.js"></script> <link rel="stylesheet" href="css/lis.modal.css" />

Les icones par défauts sont gérer par FontAwesome

Utilisation

Les modals s'utilisent uniquement dans le code JS, elles ont pour utilité de remplacer les fonctions alert() et confirm(). Toutes mes fonctions JS sont incluses dans l'objet lis afin de créer une bibliothèque de fonctions.

Attention, contrairement aux fonction alert() et confirm(), le code qui suit l'initialisation de la modal est executé !

// modal d'information simple (alert()) lis.modal("info","Ceci est une information");   // modal d'erreur avec fonction callback Ă  la fermeture lis.modal("erreur","Une erreur est survenu",function(){	 // onClose });  // modal de confirmation (confirm()) avec fonction callback onSuccess et onCancel lis.modal("confirm","Voulez-vous continuer ?",function(){ // onSuccess },function(){ // onCancel })

Vous pouvez voir des exemples sur http://besoindundeveloppeur.com/lib/lis-modal/

Options

lis.modal(type,options,onSuccess,onCancel);  // type (string) : Type de modal (info|warning|danger|success|default) OU identifiant de la modal // options (string | object) facultatif : Contenu de la modal OU paramètres d'options // onSuccess (function) facultatif : Fonction callback executé soit à la fermeture de la modal, soit onSuccess pour le type 'confirm'  // onCancel (function) facultatif : Fonction callback executé uniquement lors de l'anulation pour le type 'confirm'  default = {    title : "Information",	// Titre de la modal    content : "",		// Contenu HTML ou DOM de la modal	    ajax : {		// Permet de spécifier le contenu HTML à récupérer        url : "",	// URL à contacter        post:{}		// paramètres POST à transmettre        get : {}	// paramètres GET à transmettre    },		    btn : [{			// Array contenant les bouton d'actions        id : "lis-close-modal",	// ID du bouton        content : "Fermer",	// Texte du bouton        class : "danger",	// class du bouton (info|warning|danger|success|default)        ico : "times",		// Icone du bouton (FontAwesome)        close : true,		// Permet de fermer automatiquement la modal lors du clique sur le bouton        onClick : function(modal,btn){}	// Fonction à exectuer au clique sur le bouton (avant animation de fermeture)    }],    id : "lis-modal",		// ID de la modal    type : "info",		// Type de la modal (info|warning|danger|success|default)    icon : "info-circle",	// Icone de la modal (FontAwesome)    onClose : function(modal){},	// Fonction à exectuer lors de la fermeture de la modal (après animation)    onLoad : function(modal){},	// Fonction à executer lors de l'ouverture de la modal (après animation)    closed : true,		// Permet de fermer automatiquement la modal lors du clique sur le fond    size : "md",			// Taille de la modal (xs : 300px | md : 500px | lg : 800px)    animateIn : "fadeInDown",	// Animation d'apparition de la modal (animate.css)    animateOut : "fadeOutUp",	// Animation de fermeture de la modal (animate.css)    keyboard : true,		// Activation de la fermeture par le clavier ESC ou ENTER uniquement s'il n'y a qu'un bouton    show : true, 		// Affiche automatiquement la modal lors de ça création. Si false, il faut utiliser la fonction .open() };

MĂ©thodes

// ouverture manuelle d'une modal lis.modal(type).open();  // Fermeture de la modal lis.modal(type).close();  // Permet d'ajouter un bouton supplémentaire lis.modal(type).addBtn(btn); // btn (object) : {id,content,class,ico,close,onClicl}  // Récupérer le contenu de la modal lis.modal(type).getContent();  // Récupérer le dom complet de la modal lis.modal(type).getDOM().addClass("bounce");  // Permer de modifier les options par défauts  lis.setModalOption(options);

Exemples

Vous pouvez voir des exemples sur http://besoindundeveloppeur.com/lib/lis-modal/

// Faire une simple alerte lis.modal("info","Ceci est information ...");
// Lors d'une requête ajax $.post("/save.php",{id:1},function(json){      if(json.hasError)         return lis.modal("error","Erreur lors de l'enregistrement : "+json.error); 	     lis.modal("success","Enregirstrement effectué avec succès"); });
// Pour confirmer une suppression $("#del").on("click",function(){      lis.modal("confirm","Voulez-vous vraiment supprimer cet élément ?",function(){ 	         $.post("/del.php",{id:1},function(json){ 			             if(json.hasError)                 return lis.modal("error","Erreur lors de la suppression : "+json.error);              lis.modal("success","Elément supprimé avec succès");         })     }) });
// Avec passage de paramètre lis.modal("maModal",{     title : "Liste des participant",     content : contentUL,     btn : [{         id : "lis-success-modal",         content : "Sélectionner",         class : "success",         ico : "check",         close : false,         onClick : function(modal,btn){             lis.modal("confirm","Voulez-vous vraiment sélectionner le participant : "+modal.getContent().find("select").val(),function(){                 modal.close();             });         }     },{         id : "lis-close-modal",         content : "Annuler",         class : "danger",         ico : "times",         close : false,         onClick : function(modal,btn){             lis.modal("confirm","Voulez-vous vraiment annuler ?",function(){                 modal.close();             })         }     }],     type : "info",     icon : "bars",     closed : false,     size : "lg",     animateIn : "bounceInDown", })
// Avec chargement du contenu par Ajax. Le onLoad() est executé après la récupération du contenu. lis.modal("info",{     ajax:{         url:"./get.php",         post:{id:1}     },     onLoad:function(modal){         modal         .getContent()         .append("Chargement complet")     } });

Manipuler la modal

// Ouverture de la modal : lis.modal("info","Ceci est une information");  // Manipulation de la modal var modal = lis.modal("info") // retourne la modal qui à comme type/ID "info" modal.close(); // OU lis.modal("info").close();  // Avec un type personalisé lis.modal("maModal").close();  // Manipuler le contenu de la modal lis.modal("maModal").getContent().find("div").text();

You May Also Like