Fácil popup html
He añadido algo de texto usando el código HTML y CSS de abajo. Puedes añadir cualquier texto que necesites aquí.<h2>Pop-up automático</h2><p>Lorem, ipsum … dignissimos?</p>.popup h2{ margin-top: -20px;}.popup p{ font-size: 14px; text-align: justify; margin: 20px 0; line-height: 25px;}
He ejecutado el botón de cierre utilizando los siguientes códigos. Al hacer clic en el botón de cierre, la visualización será ninguna, es decir, estará completamente oculta.document.querySelector(«#close»).addEventListener(«click», function(){ document.querySelector(«.popup»).style.display = «none»;});
Código HTML para la ventana emergente automáticaAbajo está el código fuente necesario para crear este modal emergente automático. Si eres un principiante entonces el código fuente de abajo te ayudará. Puedes copiarlos directamente desde abajo o descargarlos usando el botón de descarga de abajo.
Ventana emergente de Javascript
Todo el contenido dentro de la demo-modal es opcional y se incluye para los propósitos de este tutorial, usted podría reemplazar con cualquier contenido que desee cuando se utiliza esto en un sitio web real. También hay un botón para activar la ventana emergente y mostrar el modelo.
Nota: Estamos construyendo esto de una manera que nos permita incluir múltiples modales en una sola página. Hacemos esto mediante el uso de atributos id / data-id coincidentes en cada modal y los correspondientes botones de apertura y cierre.
Eso es todo por este tutorial. Siguiendo este tutorial habrás aprendido a construir un modal popup sin tener que depender de ningún plugin o librería JavasScript externa. Puedes encontrar una versión completa de este modal en CodePen y el código fuente también está disponible en GitHub.
Formulario emergente Js
Hemos creado un div con id superpuesto para cubrir todo el contenido de la página cuando se muestra el popup. Esto obliga al usuario a cerrar el popup antes de volver al contenido de la página y también crea una experiencia de usuario agradable. El div con id popup será nuestro popup que contiene controles en la parte superior para cerrar el popup y nuestra área de contenido. Actualmente, esta ventana emergente no tiene contenido ni estilo, por lo que no se mostrará nada. Vamos a añadir algo de estilo a continuación.
Ahora hemos añadido algo de CSS para la superposición y la ventana emergente. En este punto, podemos ver una caja blanca sobre nuestra superposición gris. Hemos añadido una etiqueta h1 dentro de nuestra ventana emergente, un título de página y algo de contenido de la página principal. Ahora deberíamos ver algo como esto:
Modal css
Las ventanas emergentes son pequeñas ventanas que aparecen repentinamente en su pantalla. Estas ventanas emergentes pueden contener texto, enlaces, botones o incluso campos de entrada. Las ventanas emergentes se utilizan normalmente con fines publicitarios en línea. Se pueden encontrar en varios tamaños y en varias posiciones en la pantalla. Pueden contener un enlace a algún sitio externo, contenido promocional del mismo sitio, formularios de registro, formularios de inscripción a boletines informativos, etc. El sitio web puede utilizar las ventanas emergentes por diferentes razones, entre ellas: aumentar las ventas, aumentar los usuarios registrados en un sitio web o incluso aumentar el tráfico.
Los usuarios pueden encontrar las ventanas emergentes molestas, por lo que hay que colocarlas adecuadamente. Hay que tener cuidado de que el diseño de las ventanas emergentes esté optimizado y sea compatible con el SEO. Algunas reglas básicas serían: tener un botón de llamada a la acción definido y un botón de cierre, no colocar contenido engañoso, colocar el pop up en la posición de pantalla adecuada, etc.
Después de la creación exitosa de estos archivos, comenzamos con la codificación. Copiamos el código siguiente y lo pegamos en el archivo HTML. Comenzamos creando un div con un nombre de clase popup. Dentro de este div, tenemos un botón con id close. Un elemento h2 y p con algún texto de demostración y por último un enlace.