Ventana emergente simple en html y css. Modales CSS

Abrir ventana 1 Abrir ventana 2 Video en ventana 3 Foto en ventana 4

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. Los enlaces a la llamada de ventanas modales se pueden convertir en texto, o puede organizarlos en el formulario, 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, diseñar la apariencia y agregar 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: 10; pantalla: ninguno; / * fondo de apagón * / color de fondo: rgba (0, 0, 0, 0.65); posición: fija; / * posicionamiento fijo * / cursor: predeterminado; / * tipo de cursor * /) / * activa la capa de sombreado * / .overlay: target (display: block;) / * estilos modales * / .popup (arriba: -100%; derecha: 0; izquierda: 50%; tamaño de fuente: 14px; índice z: 20; margen: 0; ancho: 85%; ancho mínimo: 320px; max-width: 600px; / * posicionamiento fijo, la ventana es estable cuando se desplaza * / position: fixed; padding: 15px; border: 1px solid # 383838; background: #fefefe; / * redondeando esquinas * / -webkit-border- radio: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; fuente: 14px / 18px "Tahoma", Arial, sans-serif; / * sombra exterior * / - webkit -box-shadow: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); -moz-box-shadow: 0 15px 20px rgba (0, 0, 0, .22), 0 19px 6 0px rgba (0,0,0, .3); -ms-box-shadow: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); sombra de cuadro: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); -webkit-transform: traducir (-50%, -500%); -ms-transform: traducir (-50%, -500%); -o-transform: traducir (-50%, -500%); transformar: traducir (-50%, -500%); -webkit-transición: -webkit-transform 0.6s facilidad de salida; -moz-transición: -moz-transform 0.6s facilidad de salida; -o-transición: -o-transform 0,6 s de salida; transición: transformación de 0,6 segundos de salida; ) / * activar el bloque modal * / .overlay: target + .popup (-webkit-transform: translate (-50%, 0); -ms-transform: translate (-50%, 0); -o-transform: traducir (-50%, 0); transformar: traducir (-50%, 0); arriba: 20%;) / * formar el botón de cierre * / .close (arriba: -10px; derecha: -10px; ancho: 20px ; altura: 20px; posición: absoluta; relleno: 0; borde: 2px sólido #cc; -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.8); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; caja-sombra: 0px 0px 10px # 000; alineación de texto: centro; decoración de texto: ninguna; fuente: 13px / 20px "Tahoma", Arial, sans-serif; peso de fuente: negrita; -webkit-transición : todo facilita .8s; -moz-transición: todo facilita .8s; -ms-transición: todo facilita .8s; -o-transición: todo facilita .8s; transición: todo facilita .8s;) .close: antes (color : rgba (255, 255, 255, 0. nueve); contenido: "X"; sombra de texto: 0 -1px rgba (0, 0, 0, 0.9); tamaño de fuente: 12px; ) .close: hover (color de fondo: rgba (252, 20, 0, 0.8); -webkit-transform: rotate (360deg); -moz-transform: rotate (360deg); -ms-transform: rotate (360deg) ; -o-transform: rotate (360deg); transform: rotate (360deg);) / * imágenes dentro de la ventana * / .popup img (ancho: 100%; alto: auto;) / * miniaturas izquierda / derecha * /. pic -izquierda, .pic-right (ancho: 25%; alto: automático;) .pic-left (float: left; margin: 5px 15px 5px 0;) .pic-right (float: right; margin: 5px 0 5px 15px;) / * m-media elements, frames * / .popup embed, .popup iframe (top: 0; right: 0; bottom: 0; left: 0; display: block; margin: auto; min-width: 320px ; ancho máximo: 600px; ancho: 100%;) .popup h2 (/ * título 2 * / margen: 0; color: # 008000; relleno: 5px 0px 10px; alineación de texto: izquierda; sombra de texto: 1px 1px 3px #adadad; font-weight: 500; font-size: 1.4em; font-family: "Tahoma", Arial, sans-serif; line-height: 1.3;) / * párrafos * / .popup p (margen: 0 ; relleno: 5px 0)

Como pueden ver, queridos amigos, todo es bastante simple y sin desorden innecesario. Si hace todo bien, obtendrá una maravillosa caja de herramientas en su arsenal, en la que puede colocar cualquier contenido, ya sea contenido de texto, fotografías, diversas formas de registro y comentarios, o videos de cualquier fuente de terceros. Experimente con los parámetros, modifique la ventana como desee. Si es posible, comparta en los comentarios sus mejores prácticas o cualquier problema que haya surgido repentinamente.

O tal vez te resulte interesante:

Suplementos:

A menudo, incluso muy a menudo, me preguntan cómo detener correctamente la reproducción de video al cerrar un mod. ventana. Cuando se cierra la ventana modal, el video de la demostración deja de reproducirse. En la demostración, utilicé el evento onclick para el botón de cierre de la ventana, especificando la dirección de la página de demostración en el enlace, es decir, la página en la que se encuentra la ventana de video:

Uno puede simplemente usar el enlace con atributo vacío href = "", en ambos casos se recarga la página y, en consecuencia, se cierra la ventana, y el video se detiene, la muleta sigue siendo la de claro, pero otra solución más efectiva y válida, sin conectar javascript, a este momento No tengo.

Con la API de JavaScript, puede controlar el reproductor sin bordes y el reproductor de YouTube integrado con usando javaScript código. Para nuestro bloque modal con video en línea, el ejecutable js será así:

Cuando haga clic en el botón con id = "detener", se llamará a la función, la ventana se cerrará y el video dejará de reproducirse.
Sin embargo, debe entenderse que para otros servicios de video, los bailes con panderetas serán diferentes))). Aunque siempre hay una opción, es utilizar complementos especializados listos para usar.

Los diseñadores web y los emprendedores que viven en países de habla rusa probablemente quieran poder utilizar algo más que plantillas en inglés. También quieren tener acceso a colecciones de soluciones listas para usar en ruso. Por lo tanto, nos gustaría llamar su atención sobre la sección más reciente, que ahora se presenta en el mercado de TemplateMonster. Cabe mencionar que el texto de cada una de las plantillas fue escrito a mano. Además, no es necesario tener ningún conocimiento de codificación sobrenatural para crear un proyecto en línea impresionante.

Con todo respeto, Andrew

Hoy en día, para varios sitios, todo tipo de ventanas modales emergentes (ventanas emergentes) para registro, autorización, ventanas de información, todo tipo de formas y tamaños se han convertido en la norma. gran cantidad complementos más jQuery para creación conveniente tales ventanas emergentes, el mismo Shadowbox, por ejemplo.

La apariencia, el tamaño y el diseño de tales ventanas emergentes son completamente variados, con superposiciones, sombras, animaciones, innumerables. Lo que los une es, quizás, el hecho de que generalmente se muestran en el centro de la página, tanto horizontal como verticalmente. Y el centrado se realiza mediante JS. No entraré en los detalles de estos cálculos, los describiré solo brevemente:

El código HTML emergente generalmente tiene la siguiente estructura:

Y CSS ( aquí y a continuación, omitiré deliberadamente la escritura de algunas propiedades que son necesarias solo para algunos navegadores y sus versiones, dejando solo las más básicas):

Popup__overlay (
posición: fija;
izquierda: 0;
arriba: 0;
fondo: # 000;
opacidad: .5;
filtro: alfa (opacidad = 50);
índice z: 999
}
.surgir (
posición: absoluta;
ancho: 20%;
índice z: 1000;
borde: 1px sólido #ccc;
fondo: #fff
}

JS detecta el navegador y la versión del navegador, y en base a esto calcula las dimensiones área de trabajo y los tamaños de la ventana emergente en sí (si no están especificados), y luego se realizan cálculos simples de la posición de su esquina superior izquierda (css-properties left y top para .popup). Muchos complementos también reaccionan al cambio de tamaño de la página, recalculando todo cada vez para que la ventana emergente esté ubicada exactamente en el centro del espacio de trabajo.

Soy perfeccionista por naturaleza (lo sé, a veces es malo), y muchas veces me preocupo incluso por los pequeños detalles, tratando de mejorar y agregar la máxima extensibilidad posible a estos detalles, y no pude evitar engancharme en este mismo momento en el trabajo de todos estos complementos. Surgió la idea de que todo el trabajo de posicionamiento de la ventana emergente se puede trasladar de los hombros de JS a los hombros del propio navegador, es decir, este trabajo se puede hacer usando CSS.

Eso es lo que haremos.

A continuación, daré un ejemplo de una ventana emergente que funciona en todas las versiones principales de los principales navegadores. Para que funcione correctamente en IE<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

Entonces, tenemos una página con un botón, cuando se hace clic, debe aparecer una ventana modal con algo de información, y todo el resto del contenido debe estar sombreado con una superposición.

Comencemos con el código HTML. Su estructura diferirá ligeramente del código indicado anteriormente, por qué, más sobre esto a continuación en el artículo; las clases de elementos seguirán siendo las mismas:

< div class ="popup__overlay">
< div class ="popup">

Y algo de CSS:

Popup__overlay (
posición: fija;
izquierda: 0;
arriba: 0;
ancho: 100%;
altura: 100%;
índice z: 999
}
.surgir (
}

Tamaños fijos

Surgir (
izquierda: 50%;
arriba: 50%;
ancho: 400px;
altura: 200px;
margen izquierdo: -200px;
margen superior: -100px
}

Los márgenes negativos de la mitad del ancho y la altura son triviales y aburridos, nada original en eso.

Los tamaños de las ventanas emergentes dependen del contenido

Surgir (
margen: automático
}

Esto no afectará la alineación vertical de ninguna manera y, por cierto, si solo necesita alineación horizontal, puede detenerse allí especificando algún otro margen superior de la ventana emergente. ¡Pero esto no es suficiente para nosotros! Siga adelante.

Alineamiento vertical. Aquí es donde se pone interesante. Por supuesto, una tabla o emulación de una tabla usando display: table & display: table-cell haría frente a tal tarea sin ningún problema, pero hacer que esto funcione en el antiguo IE es más caro. La mesa también desaparece, por razones obvias.

Entonces, el margen ya falta, no conocemos los tamaños. Recordemos qué propiedades tienen efectos similares. Sí, alineación de texto. Pero solo para elementos en línea. está bien. Parece que Dios mismo ordenó el uso de display: inline-block - un elemento de bloque al que se podrían aplicar propiedades para elementos en línea. Con el soporte de esta propiedad en todos los navegadores, también, todo, se podría decir, está en orden. El código se convierte en algo como esto:

Popup__overlay (
posición: fija;
izquierda: 0;
arriba: 0;
ancho: 100%;
altura: 100%;
índice z: 999;
alineación de texto: centro
}
.surgir (
pantalla: bloque en línea;
alineación vertical: medio
}

Sigue siendo la alineación vertical: la alineación vertical está bien para nosotros. En cualquier otra situación, también sería apropiado usar la altura de línea, pero como no tenemos una altura de página fija (altura de línea en este contexto), no podemos usarla aquí. Un truco viene al rescate con la alineación vertical de elementos de tamaños desconocidos. Recuerdo exactamente que encontré este método en Habré, pero, desafortunadamente, no pude encontrar un enlace a ese tema. Este método consiste en lo siguiente: se agrega un elemento de bloque en línea de ancho cero y 100% de altura del padre, que "expande" la altura de la línea al 100% de la altura del padre, es decir, a la altura de la página de trabajo. zona. Hagámoslo más elegante usando pseudo-elementos en lugar de marcas innecesarias:

Popup__overlay: después (
pantalla: bloque en línea;
ancho: 0;
altura: 100%;
alineación vertical: medio;
contenido: ""
}

Queda por agregar un oscurecimiento de superposición semitransparente; rgba se encargará de esto. ¡Todo! Ahora, la posición de la ventana emergente está controlada solo por el navegador en el nivel de CSS.

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 importante lugar 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, coloquemos un encabezado simple y algunos párrafos. El marcado completo de nuestro ejemplo se vería así:

Abrir ventana modal

Estilos

Crear una clase modalDialog y comenzamos a darle 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.

Quizás no conoces 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 pseudo clase : 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, configuramos 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.