Cet article est un article miroir de traduction automatique, veuillez cliquer ici pour accéder à l’article original.

Vue: 20094|Répondre: 2

[HTML/HTML5] Une très belle boîte d’alerte SweetAlert

[Copié le lien]
Publié sur 24/12/2015 12:00:48 | | | |





Sweet Alert est un magnifique effet de rappel qui remplace l’alerte traditionnelle Javascrip{filter}t. SweetAlert centre et s’aligne automatiquement au centre de la page, ce qui rend ça très bien que vous utilisiez un ordinateur de bureau, un téléphone ou une tablette. De plus, une large gamme d’options de configuration personnalisées est disponible pour un contrôle flexible.

Comment utiliser :

À découvrir:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="feuille de style » type="text/css » href="dist/sweetalert.css">
Ensuite, un exemple simple :

swal({ titre : « Error ! », texte : « Voici mon message d’erreur ! », tape : « error », confirmButtonText : « Cool » }) ;
Paquet de fichiers joint : sweetalert-master.zip (650.13 KB, Nombre de téléchargements: 9, 售价: 2 粒MB)

Argument
Valeur par défaut

Descrip{filter}tion
Titrenull (obligatoire)Le titre du modal. Il peut soit être ajouté à l’objet sous la touche « titre », soit passé comme premier paramètre de la fonction.
SMSzéroUne descrip{filter}tion pour le modal. Il peut soit être ajouté à l’objet sous la touche « texte », soit passé comme second paramètre de la fonction.
typezéroLe type du modal. SweetAlert propose 4 types intégrés qui affichent une animation d’icônes correspondante : «Avertissement", "Erreur", "Succès« et »info". Vous pouvez aussi le définir comme "Entrée« pour obtenir un modal rapide. Il peut soit être placé dans l’objet sous la touche « type », soit passé comme troisième paramètre de la fonction.
allowEscapeKeytrueSi on est réglé àtrue, l’utilisateur peut renvoyer le modal en appuyant sur la touche Échap.
customClasszéroUne classe CSS personnalisée pour le modal. Il peut être ajouté à l’objet sous la touche « customClass ».
allowOutsideClickfalseSi on est réglé àtrue, l’utilisateur peut renvoyer le modal en cliquant à l’extérieur.
showCancelButtonfalseSi on est réglé àtrue, un bouton « Annuler » sera affiché, sur lequel l’utilisateur peut cliquer pour annuler le modal.
ShowConfirmButtontrueSi on est réglé àfalse, le bouton « OK/Confirmer » sera caché. Assurez-vous de régler un minuteur ou de mettre allowOutsideClick sur true lors de cette utilisation, afin de ne pas déranger l’utilisateur.
confirmButtonText« OK »Utilisez cela pour modifier le texte sur le bouton « Confirmer ». Si le bouton showCancel est défini comme vrai, le bouton de confirmation affichera automatiquement « Confirmer » au lieu de « OK ».
confirmerButtonColor« #AEDEF4 »Utilisez cela pour changer la couleur de fond du bouton « Confirmer » (il doit s’agir d’une valeur HEX).
cancelButtonText« Annuler »Utilisez cela pour modifier le texte sur le bouton « Annuler ».
closeOnConfirmertrueRéglé àfalsesi vous voulez que le modal reste ouvert même si l’utilisateur appuie sur le bouton « Confirmer ». C’est particulièrement utile si la fonction associée au bouton « Confirmer » est un autre SweetAlert.
closeOnCanceltrueC’est pareil pour closeOnConfirm, mais pour le bouton d’annulation.
imageUrlzéroAjoutez une icône personnalisée pour le modal. Doit contenir une chaîne avec le chemin vers l’image.
imageTaille« 80x80 »Si imageUrl est défini, vous pouvez spécifier imageSize pour indiquer la taille que vous souhaitez que l’icône soit en px. Passez une chaîne avec deux valeurs séparées par un « x ». La première valeur est la largeur, la seconde la hauteur.
MinuteurzéroFermeture automatique du minuteur modal. Réglé en ms (millisecondes).
HTMLfalseSi elle est réglée sur true, elle ne s’échappe pas des paramètres de titre et de texte. (Réglez sur false si vous craignez les attaques XSS.)
AnimationtrueSi on est réglé àfalse, l’animation du modal sera désactivée. Valeurs possibles (chaînes) :pop(par défaut lorsque l’animation est réglée sur true),Glisser depuis le haut, Glisser depuis le bas
inputType« texte »Changez le type de champ d’entrée lors de l’utilisationtype: "input"(Cela peut être utile si vous souhaitez que les utilisateurs tapent leur mot de passe, par exemple).
inputPlaceholderzéroEn utilisant le type d’entrée, vous pouvez spécifier un espace réservé pour aider l’utilisateur.
InputValuezéroSpécifiez une valeur de texte par défaut que vous souhaitez que votre entrée affiche lors de l’utilisationtype: "input"
showLoaderOnConfirmfalseRéglé àtruepour désactiver les boutons et montrer qu’un chargement est en cours.





Précédent:HTTPS Ces choses (1) Principe HTTPS (Réimpression)
Prochain:Captcha de page aspx vs. MVC
 Propriétaire| Publié sur 25/02/2017 18:36:23 |
Publié sur 08/12/2017 15:20:55 |
Le cadre pop de Layui est aussi agréable à utiliser
Démenti:
Tous les logiciels, supports de programmation ou articles publiés par Code Farmer Network sont uniquement destinés à l’apprentissage et à la recherche ; Le contenu ci-dessus ne doit pas être utilisé à des fins commerciales ou illégales, sinon les utilisateurs assumeront toutes les conséquences. Les informations sur ce site proviennent d’Internet, et les litiges de droits d’auteur n’ont rien à voir avec ce site. Vous devez supprimer complètement le contenu ci-dessus de votre ordinateur dans les 24 heures suivant le téléchargement. Si vous aimez le programme, merci de soutenir un logiciel authentique, d’acheter l’immatriculation et d’obtenir de meilleurs services authentiques. En cas d’infraction, veuillez nous contacter par e-mail.

Mail To:help@itsvse.com