Estás leyendo la publicación: ¿Cómo crear ventanas emergentes modales? / Bootstrap &erio; jQuery &erio; CSS
Las ventanas emergentes modales a menudo se usan en la web para iniciar suscripciones a boletines, demostrar notificaciones/alertas y controlar formularios de registro e inicio de sesión.
Puede usar varias formas de crear las ventanas emergentes modales usando HTML, CSSy JavaScript. Por eso, ahora aprenderás paso a paso específicamente sobre Ventana emergente modal Bootstrap, ventana emergente modal de jQueryy Ventana emergente modal de CSS.
Luego, finalmente te daré una forma muy simple y procesable de crear e implementar ventanas emergentes. Sin embargo, primero debe aprender por qué se utilizan ventanas emergentes modales y por qué son tan importantes.
Un cuadro de diálogo o ventana emergente modal ayuda a mostrar la última página web actualizada. El beneficio de una ventana emergente modal muestra información agregada y no vuelve a cargar la página. Es importante para una mejor experiencia de usuario porque les brinda la capacidad de ver información relevante en el cuadro emergente en una página web similar.
Los modales permanecen en silencio hasta que se activan y generalmente se usan para enfocarse en el usuario en una sola llamada para estar activo o para enfatizar información como formularios de registro y alertas.
Hay muchos lugares en los que Modal Popups está involucrado:
-
Formularios de consulta/contacto
-
Formularios de registro/generación de clientes potenciales
-
Formularios de inicio de sesión/registro
-
Formularios de búsqueda
-
Alertas/notificaciones
-
Tips de ayuda
-
Visualización de imágenes y videos a pantalla completa
Puede crear sus ventanas emergentes en torno a sus objetivos. Por ejemplo, Alpma permite a los usuarios iniciar sesión en cualquier parte del sitio.
Aunque las ventanas emergentes tienen una mala reputación sobre su uso, cuando las usa correctamente, puede beneficiarse de ellas para:
- aumentar la usabilidad de su sitio web.
- disminuir los tiempos de carga.
- aclarar todos los diseños.
Después de aprender por qué las ventanas emergentes modales son tan importantes, ahora podemos aprender cómo crearlas.
Como leyó anteriormente, las ventanas emergentes modales ayudan a los usuarios para que puedan tomar medidas antes de mudarse a otro lugar. A veces se puede utilizar para alertar a los usuarios o tomar información.
El complemento modal Bootstrap lo ayuda a crear ventanas emergentes o cuadros de diálogo modales muy útiles y funcionales. Puede consultar el ejemplo a continuación para comprender cómo puede crear su propia ventana emergente modal con un encabezado, pie de página y cuerpo del mensaje.
"myModal" clase="desvanecimiento modal"> < div clase="diálogo-modal" > <div clase="contenido-modal"> <div clase="modal-header"> <botón tipo="botón" clase="cerrar" descartar datos="modal" aria-hidden="true"> ×botón> <h4 class="modal-title">< /span>Confirmaciónh4> div> <div clase="cuerpo-modal"> <p>¿Desea guardar los cambios que realizó en el documento antes de cerrar? p> <p clase="advertencia de texto"><pequeño>Si no guarda, sus cambios se perderán.pequeño>p> div> <div clase="modal-footer"> <botón tipo="botón" clase="btn btn-default" descartar datos="modal">Cerrar botón> <botón tipo="botón" clase="btn btn-primary"> Guardar cambiosbotón> div> div> div> </div>
Cuando el "modelo de objeto del documento" se carga a través de JavaScript, la ventana se abrirá automáticamente.
Los cuadros de diálogo modales de jQuery son una forma excelente de mostrar información rápidamente. Si se prepara adecuadamente mientras crea cuadros de diálogo modales de jQuery, puede alertar a sus usuarios o mostrar errores con los sitios web geniales. (¡Por el modal contemporáneo!)
¡Veamos el ejemplo de jQuery!
$(documento).ready(función(){ $("botón").click(función(){ $("#prueba").hide(); }); } );
Este es un encabezado
Este es un párrafo.
Este es otro párrafo.
Después de esto, se puede ver lo siguiente:
CSS es un lenguaje que describe cómo se mostrarán los elementos HTML en la pantalla. Por lo tanto, primero miramos HTML y luego examinamos el CSS.
Cerrar
¡Hola!
Un modal exclusivo de CSS basado en la pseudoclase :target. Espero que lo encuentre útil.
Luego, ¡agregue CSS!
.modal-ventana { posición: fijo; color de fondo: rgba(255, 255, 255, 0.25); superior: 0; derecha: 0; inferior: 0; izquierda: 0; índice z: 999; opacidad: 0; puntero-eventos: ninguno; -transición webkit: todos los 0.3s; -moz-transición: todos los 0.3s; transición: todo 0.3s; &:objetivo { opacidad: 1; puntero-eventos: auto; } &>div { ancho: 400px; posición: absoluta; arriba: 50%; izquierda: 50%; transformar: traducir (-50%, -50%); relleno: 2em; fondo: #ffffff; color: #333333; } encabezado { font-weight: negrita; } h1 { tamaño de fuente: 150%; margen: 0 0 15px; color: #333333; } } .modal-cerrar { color: #aaa; altura de línea: 50px; tamaño de fuente: 80%; posición: absoluta; derecha: 0; alineación de texto: centro; superior: 0; ancho: 70px; texto-decoración: ninguno; &: pasar el cursor { color: #000; } } /* Estilos de demostración */ html, body { height: 100%; } cuerpo { fuente: 600 18px/1.5 -sistema Apple, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; color de fondo: #f69d75; color: #555555 } a { color: heredar; } .container { pantalla: grilla; justificar-contenido: centro; alinear elementos: centro; altura: 100vh; } .btn { color de fondo: #fff; relleno: 1em 1,5em; borde-radio: 3px; texto-decoración: ninguno; i { relleno derecho: 0.3em; } }
Se parece a esto:
Sin duda, puede crear sus ventanas emergentes modales para cualquier propósito y donde sea que se apliquen en su página web. Sin embargo, hay una forma más funcional y sencilla de crear ventanas emergentes modales.
Creador inteligente de ventanas emergentes, Popupsmart hace todo en su nombre. Para el primer paso, debe determinar por qué necesita una ventana emergente. Puede ser para aumentar la conversión de ventas, hacer crecer una lista de correo electrónico o aumentar las llamadas telefónicas. Después de eso, al elegir sus objetivos, puede pasar a los siguientes pasos:
Hay muchas plantillas listas entre las que puede elegir. Si desea guiar a su audiencia con un "Anuncio emergente", puede seleccionar esto:
O si desea aumentar la conversión de ventas con una "Ventana emergente de promoción de productos", su ventana emergente puede diseñarse como tal:
Puede personalizar su mensaje brevemente según el comportamiento del visitante para aumentar la conversión, el compromiso y la tasa de ventas. Además, Popupsmart permite a sus usuarios instalar ventanas emergentes en 1 minuto que son compatibles con todas las plataformas de sitios web.
Después de seleccionar su objetivo comercial y las plantillas emergentes compatibles, puede personalizarlas y publicarlas con el sistema fácil de usar de Popupsmart sin ningún problema técnico.
Para crear ventanas emergentes de Wix y ventanas emergentes de Squarespace, puede usar Popupsmart ya que se integra con estos creadores de sitios web.
Espero que este artículo lo guíe sobre cómo crear ventanas emergentes fácilmente. Puedes intentar hacerlos con HTML, CSS o JavaScript. Sin embargo, para no perder el tiempo, preparar las ventanas emergentes más llamativas y, lo más importante, verificar sus conversiones, ¡debe elegir Popupsmart!
Para examinar a fondo los diseños de Popupsmart, debe consultar esto:
Plantillas de diseño emergente
Además, ¿sabe cómo crear ventanas emergentes en WordPress sin complemento? ¡Ve al artículo relacionado para aprender ahora!
Publicaciones de blog relacionadas
Aumente los compromisos de su publicación de blog con una ventana emergente simple
Aumente sus vistas de YouTube sin molestar a los visitantes de su sitio web
Cómo crear ventanas emergentes CSS modales Tailwind para su sitio web
¡Gracias por tu tiempo! 🤗
