Modales con fondo borroso en CSS3. Crear un complemento de ToastMessage modal emergente de jQuery jQuery

Muy a menudo, puede encontrar modales en sitios web y todos se utilizan para diferentes tareas. 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 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 de la ventana modal en la página:

Abrir ventana modal

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 del borde: 5px; borde: 3px # 000 sólido; fondo: #fff; posición: fija; 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 de 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 superposición));));));

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.

3. Un ejemplo de una ventana modal de jQuery llamada por referencia (con demostración)

Lo más probable es que ya haya visto una ventana modal emergente en Internet más de una vez: confirmación de registro, advertencia, información de ayuda, descarga de archivos y mucho más. En este tutorial, proporcionaré algunos ejemplos de cómo crear las ventanas modales más básicas.

Cómo crear un modal emergente simple

Comencemos a examinar el código de la ventana modal más simple que aparecerá de inmediato.
código jQuery

Pegue el código en cualquier lugar de cuerpo Tu pagina. Inmediatamente después de cargar la página, sin ningún comando, verá una ventana que se ve así:

Pero el siguiente código se ejecutará después de que se cargue toda la página en el navegador. En nuestro ejemplo, después de cargar la página con imágenes, aparecerá una ventana emergente simple:

Llamar a la ventana modal de jQuery por referencia con CSS

El siguiente paso es crear ventana modal al hacer clic en el enlace. El fondo se oscurecerá lentamente.

A menudo puede ver que los formularios de inicio de sesión y registro se encuentran en dichas ventanas. Vamos a ir al grano

Primero, escribamos parte html... Colocamos este código en el cuerpo de su documento.

Llamar a una ventana modal

Código CSS... Ya sea en un archivo css separado o en
En el código jQuery, nos centraremos en la posición del modal y la máscara, en este caso oscureciendo gradualmente el fondo.

¡Atención! ¡No olvide incluir la biblioteca en el encabezado del documento!

Conectando la biblioteca desde el sitio web de Google. Bueno, el código jQuery en sí.

Código JQuery

Hablando de varias técnicas de construcción de sitios, sería ridículo no hablar de algunas de las formas de crear ventanas modales. No discutiremos el propósito, la utilidad y los problemas emergentes del uso de ventanas modales emergentes. Analicemos solo uno de los muchos ejemplos de creación de tales ventanas.
Hay situaciones en las que no es posible usar complementos especiales, por ejemplo, como y, por lo que vale la pena comprender cómo puede crear los suyos propios.

Veamos cómo hacer esto:

HTML

Comencemos agregando etiquetas con los siguientes atributos:

• href - #? w = 500 indica el ancho de la ventana
• rel: un atributo único para cada ventana
• class = "poplight" - clase para mostrar la ventana emergente

< a href= "#?w=500" rel= "popup_name" class = "poplight" >Ver ventana en acción - Ancho = 500px

Ver ventana en acción - Ancho = 500px

A continuación, necesitamos crear un marcado en línea para la ventana emergente. Puede colocarlo en cualquier lugar de la página, por ejemplo, en la parte inferior del contenido. Tenga en cuenta que la identificación emergente coincide con el atributo rel etiqueta
Esto vinculará el enlace y la ventana emergente juntos.

Y así, descubrimos la ubicación de nuestra ventana en la página, ahora vamos a diseñarla con estilos, darle, por así decirlo, un aspecto decente.

Diseño CSS

En aras de la claridad, he escrito algunas explicaciones para los parámetros de estilo de nuestra ventana. Dado que las ventanas emergentes pueden ser de diferentes tamaños, no especificamos en el CSS popup_block los bordes de la ventana, para calcular el tamaño requerido, esta es solo la tarea para.

# fundido (pantalla: ninguno; / * - oculto por defecto - * / fondo: rgba (7, 87, 207, 0,8); posición: fija; izquierda: 0; arriba: 0; ancho: 100%; altura: 100%; opacidad: .80; índice z: 9999; ) .popup_block (pantalla: ninguno; / * - oculto por defecto - * / fondo: #fff; relleno: 20px; borde: rgb sólido de 8px (134, 134, 134); flotador izquierdo; tamaño de fuente: 85%; posición: fija; arriba: 50%; izquierda: 50%; color: # 000; ancho máximo: 750px; ancho mínimo: 320px; altura: auto; índice z: 99999; / * - Sombra de cuadro CSS3 - * /-webkit-box-shadow: 0px 0px 20px # 000; -moz-box-shadow: 0px 0px 20px # 000; caja-sombra: 0px 0px 20px # 000; / * - Redondeo de esquinas CSS3 - * /-webkit-border-radius: 12px; -moz-border-radius: 12px; radio del borde: 12px; ) .popup_block p (font-weight: 400; padding: 0; margin: 0; color: # 000; line-height: 1.6;) .popup_block h2 (margin: 0px 0 10px; color: rgb (43, 43, 43 ); peso de fuente: 400; alineación de texto: centro; sombra de texto: 1px 1px 2px # 0D0C0C;) / * formar un botón de cierre * /.close (color de fondo: rgba (61, 61, 61, 0.8); borde: 2px sólido #ccc; altura: 25px; altura de línea: 20px; posición: absoluta; derecha: -17px; peso de fuente: negrita; text-align: center; text-decoration: none; padding: 0; top: -17px; width: 25px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border- radio: 50%; -o-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 1px 1px 3px # 000; -webkit-box-shadow: 1px 1px 3px # 000; caja- shadow: 1px 1px 3px # 000;) .close: before (color: rgba (255, 255, 255, 0.9); content: "X"; font-size: 12px; text-shadow: 0 -1px rgba (0, 0, 0, 0.9);) .close: hover (background-color: rgba (252, 20, 0, 0.8);) .shadow (box-shadow: 4px 4px 10px # 857373; -webkit-box-shadow: 4px 4px 10px # 857373; -moz-box-shadow: 4px 4px 10px # 857373; relleno: 0;) / * - posicionamiento fijo para IE6 - * /* html #fade (posición: absoluta;) * html .popup_block (posición: absoluta;)

#fade (display: none; / * - oculto por defecto - * / background: rgba (7, 87, 207, 0.8); position: fixed; left: 0; top: 0; width: 100%; height: 100% ; opacidad: .80; z-index: 9999;) .popup_block (display: none; / * - oculto por defecto - * / background: #fff; padding: 20px; border: 8px solid rgb (134, 134, 134) ; float: left; font-size: 85%; position: fixed; top: 50%; left: 50%; color: # 000; max-width: 750px; min-width: 320px; height: auto; z-index : 99999; / * - Sombra de cuadro CSS3 - * / -webkit-box-shadow: 0px 0px 20px # 000; -moz-box-shadow: 0px 0px 20px # 000; cuadro-sombra: 0px 0px 20px # 000; / * - Redondeo de esquinas CSS3 - * / -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;) .popup_block p (font-weight: 400; padding: 0; margin: 0 ; color: # 000; line-height: 1.6;) .popup_block h2 (margin: 0px 0 10px; color: rgb (43, 43, 43); font-weight: 400; text-align: center; text-shadow: 1px 1px 2px # 0D0C0C;) / * forman el botón de cierre * / .close (backgro und-color: rgba (61, 61, 61, 0.8); borde: 2px sólido #ccc; altura: 25px; altura de línea: 20px; posición: absoluta; derecha: -17px; font-weight: negrita; alineación de texto: centro; decoración de texto: ninguna; relleno: 0; superior: -17px; ancho: 25px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-radio-borde: 50%; radio de borde: 50%; -moz-box-shadow: 1px 1px 3px # 000; -webkit-box-shadow: 1px 1px 3px # 000; caja-sombra: 1px 1px 3px # 000; ) .close: before (color: rgba (255, 255, 255, 0.9); contenido: "X"; tamaño de fuente: 12px; text-shadow: 0 -1px rgba (0, 0, 0, 0.9);) .close: hover (background-color: rgba (252, 20, 0, 0.8);) .shadow (box-shadow: 4px 4px 10px # 857373; -webkit-box-shadow: 4px 4px 10px # 857373; -moz- box-shadow: 4px 4px 10px # 857373; padding: 0;) / * - posicionamiento fijo para IE6 - * / * html #fade (posición: absoluta;) * html .popup_block (posición: absoluta;)

Con la formación de la ventana y su apariencia usando css, creo que no habrá dificultades particulares. Los estilos se pueden escribir directamente en la página HTML, entre etiquetas y, o puede ponerlo en un archivo separado de sus estilos, generalmente este es un archivo style.css, o algo así.

Configuración de JQuery

Para el trabajo completo de la ventana modal, debe conectar jQuery, aquellos que no están familiarizados con el trabajo de esta biblioteca pueden leer.

Bueno, iremos más lejos. Puede usar la versión más reciente de jQuery del sitio web de la biblioteca, o usar un archivo separado alojado en Google vinculándolo al documento en la sección antes de la etiqueta de cierre.

colocando una línea como esta:

En el siguiente paso, veremos el relleno y las funciones del complemento jquery, para activar nuestra ventana emergente, el código contiene algunas explicaciones para una mejor comprensión de lo que estamos haciendo.

Complemento de JQuery

$ (documento). listo (función () ( // Al hacer clic en el enlace con la clase poplight y el href del atributo de etiqueta con #$ ("un.luz"). haga clic en (función () (var popID = $ (esto). attr ("rel"); // obtener el nombre de la ventana, es importante no olvidar cambiar el nombre en el atributo rel del enlace al agregar nuevas var popURL = $ (esto). attr ("href"); // obtiene el tamaño del atributo href del enlace // solicitud y variables de href url var query = popURL. separar ("?"); var dim = consulta [1]. separar ("&"); var popWidth = dim [0]. split ("=") [1]; // primer valor de la cadena de consulta // Agrega un botón de cierre a la ventana$ ("#" + popID). fundirse (). css (("ancho": Número (popWidth))). anteponer "" ) ; // Determine el margen (margen) para la alineación central (vertical y horizontalmente): agregamos 80 a la altura / ancho, teniendo en cuenta el relleno + ancho del borde definido en css var popMargTop = ($ ("#" + popID). altura () + 80) / 2; var popMargLeft = ($ ("#" + popID). ancho () + 80) / 2; // Establecer la cantidad de relleno$ ("#" + popID). css (("margin-top": - popMargTop, "margin-left": - popMargLeft)); // Agrega un fondo de sombreado semitransparente$ ("cuerpo"). adjuntar (" " ) ; // el contenedor div se escribirá antes de la etiqueta . $ ("# desvanecimiento"). css (("filtro": "alfa (opacidad = 80)")). fundirse (); // capa de translucidez, filtro para IE opaco falso retorno; )); // Cerrar la ventana y oscurecer el fondo$ (documento). on ("click", "a.close, #fade", function () ( // cerrar al hacer clic fuera de la ventana, es decir en el fondo ...$ ("# desvanecimiento, .popup_block"). fadeOut (function () ($ ("# fade, a.close"). remove (); // desvanecerse)); falso retorno; )); ));

$ (document) .ready (function () (// Al hacer clic en el enlace con la clase poplight y el href del atributo de etiqueta c # $ ("a.poplight"). click (function () (var popID = $ (this) .attr ("rel"); // obtén el nombre de la ventana, es importante no olvidar cambiar el nombre en el atributo rel del enlace al agregar nuevos var popURL = $ (this) .attr ("href"); // obtener el tamaño del atributo href del enlace // consulta y variables de la consulta href url var = popURL.split ("?"); var dim = query.split ("&"); var popWidth = dim.split ("="); // primer valor de la cadena de consulta // Agregar un botón de cierre al window $ ("#" + popID) .fadeIn (). css (("width": Number (popWidth))). Prepend (""); // Determine el margen (margen) para la alineación central (vertical y horizontalmente) - agregamos 80 a la altura / ancho con relleno + ancho de borde definido en css var popMargTop = ($ ("#" + popID) .height () + 80) / 2; var popMargLeft = ($ ("#" + popID ) .width () + 80) / 2; // Establecer el valor de sangría $ ("#" + popID) .css (("margin-top": -popMargTop, "margin-left": -popMargLeft)); / / Agrega un fondo de sombreado semitransparente $ ("cuerpo"). Append ("

"); // el contenedor div se escribirá antes de la etiqueta

... $ ("# desvanecimiento"). css (("filtro": "alfa (opacidad = 80)")). fadeIn (); // capa de translucidez, filtro para IE aburrido return false; )); // Cierra la ventana y se desvanece el fondo $ (documento) .on ("click", "a.close, #fade", function () (// cierra haciendo clic fuera de la ventana, es decir, en el fondo ... $ ( "#fade, .popup_block"). fadeOut (function () ($ ("# fade, a.close"). remove (); // fade out)); return false;)); ));

Conclusión:

En general, si no se adentra en la jungla y no se carga con galimatías de código innecesarias, nuestra maravillosa ventana modal está lista para funcionar y está esperando que sus pensamientos se traduzcan en texto o cualquier otra información útil.
Para aquellos que deseen usar una ventana modal para colocar videos o imágenes a gran escala en ella, sin embargo, aconsejé usar complementos especiales como, dado que el ejemplo anterior de una ventana modal está destinado más a información ligera y no muy pesada, aunque si se desea, esto no es problema ...

La próxima vez definitivamente te lo contaré y te mostraré con un ejemplo, y seguro, muchos estarán interesados ​​en aprender sobre otros objetos de terceros en la ventana emergente. ¡Así que no se pierda en la web y permanezca atento!

Actualizar: Versión dm-modal.js v1.3 (15.01.2017)
Reparado: Se reemplazó la función .live () obsoleta usando la sintaxis href * = \\ #. El complemento ahora funciona con las últimas versiones de la biblioteca jQuery

¡Eso es todo! Espero que tengas otro tutorial útil.

Con todo respeto, Andrew

Los modales son una parte integral del diseño web moderno, con la ayuda de ellos, el desarrollador puede recurrir al método de bucle en una página y no arrojar al visitante a las páginas auxiliares. En este tutorial, veremos cómo crear impresionantes modales de fondo borroso para su sitio web usando jQuery y CSS3. Gracias a estas reglas, crearemos un fondo borroso cuando aparezca una ventana, que unirá la mirada del visitante solo a la información necesaria en el sitio.

Modales de fondo borroso CSS3

Las mejores noticias económicas solo están aquí: Drobakha

La animación de la ventana se establecerá de tal manera que cuando haga clic en el botón de apariencia, la ventana se animará de arriba a abajo, mientras que el desenfoque del fondo se mejorará automáticamente.

Paso 1. HTML

Tendremos un contenedor que contendrá: título, descripción, luego agregamos una clase para un botón con una clase toggleModal para abrir una ventana modal:

Bóveda

Descripción

Abrir articulo