Este artículo es un artículo espejo de traducción automática, por favor haga clic aquí para saltar al artículo original.

Vista: 20094|Respuesta: 2

[HTML/HTML5] Un cuadro de mensajes de alerta muy bonito SweetAlert

[Copiar enlace]
Publicado en 24/12/2015 12:00:48 | | | |





Sweet Alert es un efecto de recordatorio precioso que sustituye al tradicional Javascrip{filter}t Alert. SweetAlert centra y alinea automáticamente el centro de la página, así que queda genial tanto si usas un ordenador de sobremesa, móvil o tablet. Además, hay una amplia gama de opciones de configuración personalizadas disponibles para un control flexible.

Cómo usar:

Presenta:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="hoja de estilo" type="text/css" href="dist/sweetalert.css">
Luego, un ejemplo sencillo:

swal({ título: "¡Error!", texto: "¡Aquí está mi mensaje de error!", escribe: "error", confirmButtonText: "Cool" });
Paquete de archivos adjunto: sweetalert-master.zip (650.13 KB, Número de descargas: 9, 售价: 2 粒MB)

Argumento
Valor por defecto

Descrip{filter}tion
Títulonull (obligatorio)El título del modal. Puede añadirse al objeto bajo la clave "título" o pasarse como el primer parámetro de la función.
Mensaje de textonuloUna descrip{filter}tion para el modal. Puede añadirse al objeto bajo la tecla "texto" o pasarse como el segundo parámetro de la función.
tiponuloEl tipo del modal. SweetAlert viene con 4 tipos integrados que mostrarán una animación de icono correspondiente: "Advertencia", "Error", "Éxito" y "información". También puedes ponerlo como "Entrada"para obtener un modal de prompt. Puede colocarse en el objeto bajo la clave "tipo" o pasarse como el tercer parámetro de la función.
allowEscapeKeytrueSi se establece entrue, el usuario puede descartar el modal pulsando la tecla Escape.
Clase personalizadanuloUna clase CSS personalizada para el modal. Puede añadirse al objeto bajo la clave "customClass".
allowOutsideClickfalseSi se establece entrue, el usuario puede descartar el modal haciendo clic fuera de él.
mostrarCancelarBotónfalseSi se establece entrue, se mostrará un botón "Cancelar", en el que el usuario puede hacer clic para descartar el modal.
Botón de mostrarConfirmartrueSi se establece enfalse, el botón "Aceptar/Confirmar" quedará oculto. Asegúrate de poner un temporizador o poner allowOutsideClick en verdadero cuando uses esto, para no molestar al usuario.
confirmButtonText"Vale"Usa esto para cambiar el texto del botón "Confirmar". Si el botón showCancel está configurado como verdadero, el botón de confirmar mostrará automáticamente "Confirmar" en lugar de "OK".
confirmButtonColor"#AEDEF4"Usa esto para cambiar el color de fondo del botón "Confirmar" (debe ser un valor HEX).
cancelButtonText"Cancelar"Usa esto para cambiar el texto en el botón "Cancelar".
closeOnConfirmartrueA ajustarfalsesi quieres que el modal permanezca abierto incluso si el usuario pulsa el botón "Confirmar". Esto es especialmente útil si la función asociada al botón "Confirmar" es otro SweetAlert.
closeOnCanceltrueIgual que closeOnConfirm, pero para el botón de cancelar.
imageUrlnuloAñade un icono personalizado para el modal. Debe contener una cadena con el camino hacia la imagen.
imageSize"80x80"Si imageUrl está activado, puedes especificar imageSize para que describa el tamaño que quieres que tenga el icono en px. Pasa una cadena con dos valores separados por una "x". El primer valor es el ancho, el segundo es la altura.
temporizadornuloCierre automático del temporizador modal. Configurado en ms (milisegundos).
HTMLfalseSi se configura como verdadero, no se escapará de los parámetros de título y texto. (Configura en falso si te preocupan los ataques XSS.)
AnimacióntrueSi se establece enfalse, la animación del modal quedará desactivada. Valores posibles (de cadena):pop(por defecto cuando la animación se pone en verdadera),deslizar desde arriba, deslizarse desde abajo
inputType"texto"Cambia el tipo del campo de entrada al usartype: "input"(esto puede ser útil si quieres que los usuarios escriban su contraseña, por ejemplo).
inputPlaceholdernuloAl usar el tipo de entrada, puedes especificar un marcador de posición para ayudar al usuario.
inputValuenuloEspecifica un valor de texto predeterminado que quieras que muestre tu entrada al usarlotype: "input"
showLoaderOnConfirmfalseA ajustartruepara desactivar los botones y mostrar que algo está cargando.





Anterior:HTTPS Esas cosas (1) Principio HTTPS (Reimpresión)
Próximo:Captcha de página de ASPH vs. MVC
 Propietario| Publicado en 25/2/2017 18:36:23 |
Publicado en 8/12/2017 15:20:55 |
El Pop Frame de Layui también se siente bien de usar
Renuncia:
Todo el software, materiales de programación o artículos publicados por Code Farmer Network son únicamente para fines de aprendizaje e investigación; El contenido anterior no se utilizará con fines comerciales o ilegales; de lo contrario, los usuarios asumirán todas las consecuencias. La información de este sitio proviene de Internet, y las disputas de derechos de autor no tienen nada que ver con este sitio. Debes eliminar completamente el contenido anterior de tu ordenador en un plazo de 24 horas desde la descarga. Si te gusta el programa, por favor apoya el software genuino, compra el registro y obtén mejores servicios genuinos. Si hay alguna infracción, por favor contáctanos por correo electrónico.

Mail To:help@itsvse.com