EntradaVentana modal con formato css. Cómo crear una ventana modal en HTML5 y CSS3
En esta lección, no revelaré un secreto para diseñadores de diseño experimentados y gurús de CSS, pero este artículo será útil para principiantes. aquí es donde puede aprender a crear ventanas emergentes en la parte superior de todo su sitio.La mayoría de las veces, estas ventanas aparecen después de realizar ciertas acciones en el sitio, por ejemplo, un usuario hace clic en el enlace "Solicitar una devolución de llamada" y aparece un formulario de pedido frente a él.
Es muy conveniente usar ventanas emergentes junto con ajax, pero este es un tema para otra lección.
Cada vez más recursos web están comenzando a aparecer en la web que utilizan ventanas emergentes PopUp. Todo el mundo sabe como ejemplo. redes sociales... Se han eliminado todos los datos innecesarios de las capturas de pantalla.
En contacto con
Gorjeo
Creo que hay suficientes razones para comenzar a estudiar la pregunta: cómo hacer una ventana emergente emergente en su sitio.
Declaración del problema (TOR)
Necesita crear una ventana emergente con una pantalla opaca en la parte superior de todo el sitio.Solución
Método 1
html
css
* (font-family: Areal;) .b-container (ancho: 200px; alto: 150px; color de fondo: #ccc; margen: 0px automático; relleno: 10px; tamaño de fuente: 30px; color: #fff;) .b-popup (ancho: 100%; alto: 2000px; color de fondo: rgba (0,0,0,0,5); desbordamiento: oculto; posición: fija; arriba: 0px;) .b-popup .b-popup -contenido (margen: 40px auto 0px auto; ancho: 100px; alto: 40px; relleno: 10px; color de fondo: # c5c5c5; radio del borde: 5px; sombra del cuadro: 0px 0px 10px # 000;)Resultado:
Muy a menudo se sugiere utilizar:
Posición: absoluta;
Sí, el resultado es el mismo, pero debido a que hemos configurado la altura del bloque "sombreado", aparecen barras de desplazamiento. Por eso este método no es adecuado.
Método 2
Este método no difiere dramáticamente del Método 1, pero lo encuentro más conveniente.HTML (sin cambios)
CSS
* (font-family: Areal;) .b-container (ancho: 200px; alto: 150px; color de fondo: #ccc; margen: 0px automático; relleno: 10px; tamaño de fuente: 30px; color: #fff;) .b-popup (ancho: 100%; altura mínima: 100%; color de fondo: rgba (0,0,0,0,5); desbordamiento: oculto; posición: fija; superior: 0px;) .b-popup. b-popup-content (margin: 40px auto 0px auto; width: 100px; height: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)El resultado es similar
Gracias a la propiedad: altura mínima: 100%; nuestro bloque "apagón" ha adquirido un ancho del 100% y altura mínima en el 100% de la pantalla.El único inconveniente este método es eso explorador de Internet admite esta propiedad solo desde la versión 8.0.
Añadiendo magia a Jquery
Ahora agreguemos enlaces para ocultar / mostrar nuestra ventana emergente.Para hacer esto, necesita conectar la biblioteca JQuery y un pequeño script:
Además, el Html debe actualizarse:
Resultado
Ahora, cuando se cargue la página, la ventana emergente desaparecerá.Puedes ver el resultado aquí.
Hola a todos, les contaré algo muy conveniente que se llama ventana modal, ¿averiguaremos cómo hacer una ventana modal? Muchos no entienden lo que es, intentaré explicarlo en un idioma que comprendan, en otras palabras, esta es una ventana emergente cuando hace clic en un botón o texto.
Dentro de esta ventana, puede haber cualquier información (video, imagen, código, etc.) Ahora he comenzado a usar más la ventana modal, ya que hay algún material que debe ser admitido para que no se muestre en la página, pero digamos que había una imagen, cuando haces clic en ella, aparece una ventana e información.
Recientemente hice esto en un sitio, inserté una imagen en la página principal, ni siquiera una imagen, sino una captura de pantalla de un video de YouTube, y cuando hice clic, aparece una ventana donde se muestra el video. Un ejemplo de una ventana de este tipo se puede ver en mi página con el juego, el principio es el mismo, cuando haces clic en la imagen, aparece una ventana con el juego. Hice esto porque la expansión del juego es más amplia que mi columna de contenido, así que encontré una forma de salir de la situación.
Considere una ventana modal en css, para no engañarnos, usaremos estilos, es decir, escribe estilos en el archivo principal y el código en nuestra ventana, consideraremos todo en detalle, qué y cómo.
Ventana modal en CSS, como hacer una ventana modal
Lo primero que necesitamos son estilos, copie todo el código con estilos, que se encuentra debajo y péguelo en su archivo de estilo principal, es decir, en style.css
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | ... Ventana (posición: fija; familia de fuentes: Arial, Helvetica, sans-serif; arriba: 0; derecha: 0; abajo: 0; izquierda: 0; fondo: rgba (0, 0, 0, 0.7); índice z : 99999; - webkit-transición: opacidad 400 ms fácil de entrar; - moz-transición: opacidad 400 ms fácil de entrar; transición: opacidad 400 ms fácil de entrar; pantalla: ninguna; puntero-eventos: ninguno;). Ventana: objetivo (pantalla: bloque; puntero-eventos: auto;). Ventana> div (ancho: 460 px; posición: relativa; margen: 10% automático; relleno: 30 px 10 px 10 px; radio del borde: 10 px; fondo: #fff; sombra del cuadro: 0 px 0 px 20 px 2 px;). close (background: # cc3300; color: #FFFFFF; line- height: 25px; position: absolute; right: - 12px; text- align: center; top: - 10px; width: 24px; text- decoration: none; font- peso: negrita; - webkit- borde- radio: 12px; - moz- borde- radio: 12px; borde- radio: 12px; - moz- caja- sombra: 1px 1px 3px # 000; - webkit- caja- sombra: 1px 1px 3px # 000; caja-sombra: 1px 1px 3px # 000;). cerrar: hover (fondo: # 990000;) |
Ventana (posición: fija; familia de fuentes: Arial, Helvetica, sans-serif; arriba: 0; derecha: 0; abajo: 0; izquierda: 0; fondo: rgba (0,0,0,0,7); índice z : 99999; -webkit-transición: opacidad 400ms facilidad de entrada; -moz-transición: opacidad 400ms facilidad de entrada; transición: opacidad 400ms facilidad de entrada; pantalla: ninguna; eventos de puntero: ninguna;). Ventana: destino (pantalla : block; pointer-events: auto;). Ventana> div (ancho: 460 px; posición: relativa; margen: 10% automático; relleno: 30 px 10 px 10 px; radio del borde: 10 px; fondo: #fff; sombra del cuadro: 0px 0px 20px 2px;) .close (fondo: # cc3300; color: #FFFFFF; altura de línea: 25px; posición: absoluta; derecha: -12px; alineación de texto: centro; parte superior: -10px; ancho: 24px; texto -decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px # 000; -webkit -box-shadow: 1px 1px 3px # 000; box-shadow: 1px 1px 3px # 000;) .close: hover (background: # 990000;)
Guarde, puede jugar con los estilos y hacer algo más hermoso, cambiar el fondo, hacer otro marco, etc. Vaya a la página donde desea que aparezca esta ventana y pegue el siguiente código:
| 1 2 3 4 5 6 7 | < a href= "#ModalOpen" title= "" >Botón < div id= "ModalOpen" class = "Window" > < div> < a href= "#close" title= "Cerrar" class = "close" >XEl contenido de la ventana estará aquí. |
Botón
Ahora analicemos un poco lo que contiene, necesitas cambiarlo. Donde esta escrito "Botón" allí puedes insertar, como una imagen y texto, lo que quieras, es decir, al hacer clic en él, se abrirá una ventana. Donde esta escrito "El contenido de la ventana estará aquí" inserte lo que le gustaría ver en la ventana emergente, eso es básicamente todo.
¡NOTICIAS!
Bueno, en las noticias de seguimiento, como siempre, ya me he vuelto frecuente con las noticias)) Me hice una pequeña página con programa de afiliación, en el formulario, voy a empolvar a todos para que vayan y vean, tal vez alguien dé algún consejo más interesante, por ejemplo, para agregar algo, bueno, ya sabes de lo que estoy hablando. Todavía hay algunos pensamientos sobre ella, para agregar un video conmigo, tal vez una instrucción, bueno, algo así, en general, ¡estoy esperando un comentario tuyo!
Una vez más, paso al tema de la creación de ventanas modales (emergentes). Recientemente, estoy cada vez más interesado en varias técnicas para ejecutar ventanas emergentes, sin usar javascript, Complementos de jQuery etc. De mayor interés es la posibilidad de aplicar estilos limpios y el potencial inagotable de las nuevas funcionalidades de CSS3.
Partiendo de los desarrollos de algunos burgueses respetados, son tipos astutos en este sentido, se obtienen buenos resultados en cuanto a la creación de ventanas modales utilizando CSS3. La tarea, en primer lugar, es lograr una compatibilidad entre navegadores más o menos estable del resultado final y, por supuesto, con la menor pérdida, reducir la cantidad total de código, tanto en HTML como en CSS, con el fin de hacer la vida más fácil para los creadores de sitios web que han sufrido mucho.
Lo que sucede al final, lo tengo en este sentido hoy, lo veremos con ustedes, y al mismo tiempo, y aprenderemos cómo hacer ventanas modales emergentes usando la "magia" de CSS3.
Para empezar, todos aquellos que estén interesados en este tema pueden echar un vistazo a un ejemplo de cómo funcionan las ventanas modales en varias versiones y descargar las fuentes:
No debe tomar esta lección como una guía para la acción, ya que en esta etapa era posible lograr un soporte confiable solo en los navegadores modernos ( IE 9+, Firefox, Safari, Opera, Chrome). Teniendo en cuenta el hecho de que las versiones antiguas del navegador IE siguen siendo bastante populares entre los usuarios, recomiendo considerar este artículo como una especie de experimento, una demostración de las capacidades de CSS3.
Bien, ahora vayamos directamente al diseño en sí. código HTML y diseñar nuestra ventana modal usando css3)))
Paso 1. HTML
Primero, creemos algunas marcas HTML básicas. Como puede ver, la construcción básica es bastante simple si consideramos el marcado html de modales y botones (enlaces) para activarlos. Cada ventana modal no es más que un contenedor estándar
Abrir ventana 1 Abrir ventana 2 Video en ventana 3 Foto en ventana 4
Bóveda
Inserta tu video aquí o desde cualquier recurso de terceros, YouTube, Vimeo, etc. (iframe, incrustar) ...
En el ejemplo de código anterior, para mayor claridad, escribí breves explicaciones en los contenedores de ventanas modales. Te queda por analogía, en contenedor div ventana emergente, coloque cualquier parte de su contenido, ya sea texto simple, imágenes o videos de cualquier recurso de terceros, YouTube, Vimeo, etc. Enlaces para llamar ventanas modales, puede hacer texto, o puede diseñarlos en forma de maravillosos botones de degradado, como en el ejemplo.
Paso 2. CSS
El siguiente paso, este es el más interesante, es importante preparar todos los estilos necesarios para nuestra ventana modal, organizar apariencia y agregue funcionalidad. He omitido los estilos de página básicos para no confundir y he agregado algunos comentarios con comentarios para mayor claridad:
/ * Estilos básicos de apagón y capa modal * / .overlay (arriba: 0; derecha: 0; abajo: 0; izquierda: 0; índice z: 1; visibilidad: oculta; / * fondo apagón * / color de fondo: rgba (0, 0, 0, 0.7); opacidad: 0; posición: fija; / * posicionamiento fijo * / cursor: predeterminado; / * tipo de cursor * / -webkit-transición: opacidad .5s; -moz-transición: opacidad. 5s; -ms-transición: opacidad .5s; -o-transición: opacidad .5s; transición: opacidad .5s;) .overlay: target (visibilidad: visible; opacidad: 1;) .is-image (arriba: 0; right: 0; bottom: 0; left: 0; display: block; margin: auto; width: 100%; height: auto; / * redondeando las esquinas de las imágenes en línea * / -webkit-border-radius: 4px; -moz - border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px;) / * elementos m-media incrustados, marcos * / embed, iframe (arriba: 0; derecha: 0; abajo: 0; left: 0; display: block; margin: auto; min-width: 320px; max-width: 600px; width: 100%;) .popup h1 (/ * header 1 * / color: # 008000; text-align: left ; texto-sombra: 0 1p x 3px rgba (0,0,0, .3); fuente: 24px "Trebuchet MS", Helvetica, sans-serif; font-weight: negrita; ) .popup h2 (/ * encabezado 2 * / color: # 008000; alineación de texto: izquierda; sombra de texto: 0 1px 3px rgba (0,0,0, .3); fuente: 22px "Trebuchet MS", Helvetica , sans-serif;) / *** Estilos de ventana modal de formulario *** / .popup (arriba: 0; derecha: 0; izquierda: 0; tamaño de fuente: 14px; índice z: 10; pantalla: bloque; visibilidad : oculto; margen: 0 automático; ancho: 90%; ancho mínimo: 320 px; ancho máximo: 600 px; / * posicionamiento fijo, la ventana es estable cuando se desplaza * / posición: fijo; relleno: 15 px; borde: 1 px sólido # 383838; / * redondeo de esquinas * / -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; background-color: #FFFFFF; / * caja-sombra exterior * / -webkit-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); -moz-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); - ms-box -shadow: 0 0 6px rgba (0, 0, 0, 0.8); -o-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); box-shadow: 0px 0px 6px rgba ( 0, 0, 0, 0.8); / * transparencia total de la ventana, que aparece al hacer clic * / opacidad: 0; / * efecto de transición (aparece) * / -webkit-transiti encendido: toda facilidad .5s; -moz-transición: todo facilidad .5s; -ms-transición: todo facilidad .5s; -o-transición: toda facilidad .5s; transición: toda facilidad .5s; ) / * habilitar la ventana para que aparezca y oscurecer el fondo * / .overlay: target + .popup (top: 20%; / * posición de la ventana desde la parte superior de la página cuando aparece * / visibilidad: visible; opacidad: 1; / * eliminar transparencia * /) / * del botón de cierre * / .close (posición: absoluta; arriba: -10px; derecha: -10px; relleno: 0; ancho: 20px; alto: 20px; borde: 2px sólido #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; background-color: rgba (61, 61, 61, 0. ocho); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; caja de sombra: 0px 0px 10px # 000; alineación de texto: centro; decoración de texto: ninguna; font-weight: negrita; altura de línea: 20px; / * establecer valores y efecto de transición al pasar el mouse * / -webkit-transition: todo facilidad .8s; -moz-transición: todo facilidad .8s; -ms-transición: todo facilidad .8s; -o-transición: toda facilidad .8s; transición: toda facilidad .8s; ) .close: before (color: rgba (255, 255, 255, 0.9); contenido: "X"; text-shadow: 0 -1px rgba (0, 0, 0, 0.9); font-size: 12px;) .close: hover (background-color: rgba (252, 20, 0, 0.8); / * gira el botón al pasar el mouse * / -webkit-transform: rotate (360deg); -moz-transform: rotate (360deg); - ms -transform: rotate (360deg); -o-transform: rotate (360deg); transform: rotate (360deg);) / * opcional al agregar archivos adjuntos * / .popup p, .popup div (margin-bottom: 10px;)
Como pueden ver, queridos amigos, todo es bastante simple y sin desorden innecesario. Si hace todo correctamente, obtendrá en su arsenal, una maravillosa ventana emergente modal en la que puede colocar cualquier contenido, ya sea contenido de texto, fotos, varios formularios de registro y realimentación o video de cualquier fuente de terceros. Experimente con los parámetros, modifique la ventana como desee y, si es posible, comparta sus mejores prácticas, así como los problemas que surjan de repente, en los comentarios.
Los modales son una herramienta de uso común en el arsenal de los webmasters. Es muy adecuado para resolver una gran cantidad de tareas, como mostrar formularios de registro, bloques de anuncios, mensajes, etc.
Pero a pesar del lugar importante en apoyo informativo proyecto, los modales generalmente se implementan en JavaScript, lo que puede crear problemas al expandir la funcionalidad o proporcionar compatibilidad con versiones anteriores.
HTML5 y CSS3 le permiten crear modales con extraordinaria facilidad.
Marcado HTML
El primer paso para crear un modal es un marcado simple y efectivo:
Abrir ventana modal
Dentro de un elemento div se coloca el contenido del modal. También necesita organizar un enlace para cerrar la ventana. Por ejemplo, publiquemos un encabezado simple y algunos párrafos. El marcado completo de nuestro ejemplo se vería así:
Abrir ventana modal
Ventana modal
Un ejemplo de una ventana modal simple que se puede crear usando CSS3.
Se puede utilizar en una amplia gama, desde la visualización de mensajes hasta un formulario de registro.
Estilos
Crear una clase modalDialog y comenzamos a dar forma a la apariencia:
ModalDialog (posición: fija; familia de fuentes: Arial, Helvetica, sans-serif; arriba: 0; derecha: 0; abajo: 0; izquierda: 0; fondo: rgba (0,0,0,0,8); índice z : 99999; -webkit-transición: opacidad 400ms facilidad de entrada; -moz-transición: opacidad 400ms facilidad de entrada; transición: opacidad 400ms facilidad de entrada; pantalla: ninguna; eventos de puntero: ninguna;)
Nuestra ventana tendrá una posición fija, es decir, se moverá hacia abajo si desplaza la página mientras la ventana está abierta. Además, nuestro fondo negro se expandirá para llenar toda la pantalla.
El fondo tendrá una ligera transparencia y también se colocará encima de todos los demás elementos mediante el uso de la propiedad índice z.
Finalmente, configuramos transiciones para mostrar nuestra ventana modal y ocultarla en un estado inactivo.
Tal vez no conozcas la propiedad puntero-eventos, pero le permite controlar cómo reaccionan los elementos al clic del mouse. Establecemos el valor a su valor para la clase. modalDialog, ya que el enlace no debería responder a los clics del mouse cuando la pseudoclase está activa ": Objetivo".
Ahora agregamos la pseudoclase : objetivo y estilos para la ventana modal.
ModalDialog: target (display: block; pointer-events: auto;). ModalDialog> div (ancho: 400px; posición: relativa; margen: 10% automático; relleno: 5px 20px 13px 20px; radio del borde: 10px; fondo: # fff; fondo: -moz-linear-gradient (#fff, # 999); fondo: -webkit-linear-gradient (#fff, # 999); fondo: -o-linear-gradient (#fff, # 999); )
Pseudo clase objetivo cambia el modo de visualización del elemento, por lo que nuestro modal se mostrará cuando se haga clic en el enlace. También cambiamos el valor de la propiedad puntero-eventos.
Definimos el ancho del modal y la posición en la página. También defina un degradado para el fondo y las esquinas redondeadas.
Cerrar la ventana
Ahora necesitamos implementar la funcionalidad de cerrar la ventana. Formamos la apariencia del botón:
Cerrar (fondo: # 606061; color: #FFFFFF; altura de línea: 25 px; posición: absoluta; derecha: -12 px; alineación de texto: centro; parte superior: -10 px; ancho: 24 px; decoración de texto: ninguna; fuente- peso: negrita; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px # 000; -webkit-box-shadow: 1px 1px 3px # 000; caja-sombra: 1px 1px 3px # 000;) .close: hover (background: # 00d9ff;)
Para nuestro botón, establecemos el fondo y la posición del texto. Luego colocamos el botón, lo redondeamos usando la propiedad de redondeo del marco y formamos una sombra sutil. Cuando pase el cursor del mouse sobre el botón, cambiaremos el color de fondo.
Muy a menudo, puede encontrar modales en sitios y todos se utilizan para diferentes propósitos. De hecho, es una herramienta bastante poderosa que le permite hacer que la interfaz del sitio sea más interactiva y fácil de usar. Por ejemplo, las ventanas modales se pueden usar para varios formularios, como un formulario de autorización, un formulario de comentarios, pedir un producto y nunca se sabe.
En esta publicación, veremos un ejemplo de cómo hacer una ventana modal simple con usando jQuery y CSS. La peculiaridad de este ejemplo es que no es necesario aquí, bueno, con la excepción de la propia biblioteca jQuery.
Coloque el código modal en la página:
Como puede ver en el marcado, el bloque de la ventana modal en sí es un div con un atributo id = modal_form que contiene un elemento span con id = modal_close... Este elemento servirá como botón para cerrar la ventana modal, además, debajo del bloque hay un div con el atributo id = cubrir, que sirve a la vez para oscurecer el fondo. La ventana modal se abrirá por referencia, con la clase modal.
CSS para ventana modal
#modal_form (ancho: 300px; alto: 300px; radio de borde: 5px; borde: 3px # 000 sólido; fondo: #fff; posición: fija; parte superior: 45%; izquierda: 50%; margen superior: -150px; margin-left: -150px; display: none; opacity: 0; z-index: 5; padding: 20px 10px;) #modal_form #modal_close (width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block;) #overlay (z-index: 3; position: fixed; background-color: # 000; opacity: 0.8; -moz-opacity: 0.8; filter: alpha (opacity = 80) ; ancho: 100%; alto: 100%; arriba: 0; izquierda: 0; cursor: puntero; pantalla: ninguno;)
Para modal_form establecemos un ancho y alto fijos y luego centramos la posición en el centro de la pantalla. Para una base modal ( cubrir) establecemos el tamaño al ancho de la pantalla, lo rellenamos con transparencia y también lo ocultamos por defecto. Un momento especial con índice z, el modal debe tener el mayor de todos los elementos de la página, y la portada debe tener el mayor de todos menos el modal en sí.
Ahora, para lo más básico, este es el código javascript. Para la ventana modal, se usarán dos eventos principales, esta es su apertura: hacer clic en un elemento con la clase modal, en nuestro caso este es un enlace, y cerrar la ventana modal es un clic en la portada ( cubrir), o haga clic en el botón cerrar, en nuestro caso es un elemento span con id = modal_close.
$ (document) .ready (function () ($ (". modal"). click (function (event) (event.preventDefault (); $ ("# overlay"). fadeIn (400, // animar mostrando la portada function () (// luego muestra la ventana mod. $ ("# modal_form") .css ("display", "block") .animate ((opacity: 1, top: "50%"), 200);) );)); // cerrar la ventana modal $ ("# modal_close, #overlay"). click (function () ($ ("# modal_form") .animate ((opacity: 0, top: "45%") , 200, // función de disminución de opacidad () (// después de la animación $ (this) .css ("display", "none"); // ocultar la ventana $ ("# overlay"). FadeOut (400); / / ocultar la bandeja));));));
Con animate cambiamos la posición vertical cima, así como transparencia opacidad, y con esto obtenemos un efecto interesante. Se utiliza un efecto similar tanto cuando se abre la ventana como cuando se cierra. La diferencia es que se cambia el orden de aplicación de las propiedades de los bloques, visualizando así la apertura y el cierre de la ventana.