Exemple - Lis.modal()

# Exemple 1

Un exemple simple d'utilisation


lis.modal("info","Ceci est une modal d'information");

Ouvrir

# Exemple 2

Les types de modals


lis.modal("info","Ceci est une modal d'information");
lis.modal("warning","Attention ! Il y a un problème");
lis.modal("danger","Erreur lors de l'enregistrement !");
lis.modal("success","Félicitations !");
lis.modal("default","Modal basique");

info

warning

danger

success

default

# Exemple 3

L'utilisation des callbacks


lis.modal("danger","Erreur lors de l'enregistrement",function(){
	lis.modal("info","Annulation de l'enregistrement");
});

Ouvrir

# Exemple 4

Lors de requêtes Ajax


$.post("/save.php",{id:1},function(json){
	if(json.hasError)
		return lis.modal("danger","Erreur lors de l'enregistrement");
		
	lis.modal("success","Enregistrement avec succès")
});

Succès

Erreur

# Exemple 5

Passage de paramètres en option

Contenu de la modal


var contentUL = 'Sélectionner un participant : <select id='participant'>';
contentUL += '<option value='1'>Participant 1</option>';
contentUL += '<option value='2'>Participant 2</option>';
contentUL += '<option value='3'>Participant 3</option>';
contentUL += '<option value='4'>Participant 4</option>';
contentUL += '<option value='5'>Participant 5</option>';
contentUL += '<option value='6'>Participant 6</option>';
contentUL += '<option value='7'>Participant 7</option>';
contentUL += '<option value='8'>Participant 8</option>';
contentUL += '<option value='9'>Participant 9</option>';
contentUL += '<option value='10'>Participant 10</option>';
contentUL += '</select>';


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",
})

Ouvrir

# Exemple 6

Chargement du contenu par ajax (content). 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")
    }
});

Ouvrir

# Exemple 7

Affichage d'un formulaire via Ajax


lis.modal("monFormulaire",{
    title:"Inscription à la Newsletter",
    type :"warning",
    ajax : {url:"./form.php"},
    btn  : []   // on supprime tous les boutons
})
.addBtn({
    content : "Valider",
    class : "success",
    ico : "check",
    close : false,
    onClick : valideMail
})
.addBtn(); // Si aucun paramètre n'est passé, la fonction ajoute le bouton par défaut défini dans ModalDefaultOption, soit le bouton Fermer.

function valideMail(modal)
{
    var form = modal.getContent().find("form")
    var email = form.find("#inputEmail3").val();
    
    if(!email || email == "")
        return lis.modal("erreur",{content:"Veuillez renseigner votre adresse email",size:"xs"});
    
    var regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    
    if(!regex.test(email.toLowerCase()))
        return lis.modal("erreur",{content:"Votre adresse email n'a pas un format valide",size:"xs"});
       
    lis.modal("info","Rien n'a été enregistré, il n'existe pas de newsletter... pour le moment");
    
    modal.close();
}

Ouvrir