Las ventanas modales son una herramienta de uso frecuente en el arsenal de un webmaster. Es muy adecuado para resolver gran cantidad tareas como mostrar formularios de registro, unidades publicitarias, mensajes, etc.
Pero, a pesar del importante lugar que ocupa soporte de información proyecto, las ventanas modales generalmente se implementan en JavaScript, lo que puede crear problemas al expandir la funcionalidad o garantizar la compatibilidad con versiones anteriores.
HTML5 y CSS3 hacen que sea increíblemente fácil crear ventanas modales.
marcado HTMLEl primer paso para crear una ventana modal es un marcado simple y eficaz:
Abrir ventana modal
Dentro de un elemento div Se colocan los contenidos de la ventana modal. También debe proporcionar un enlace para cerrar la ventana. Por ejemplo, coloquemos un título simple y varios párrafos. El marcado completo para nuestro ejemplo se vería así:
Abrir ventana modal X Ventana modal
Un ejemplo de una ventana modal simple que se puede crear usando CSS3.
Se puede utilizar en una amplia gama, desde mostrar mensajes hasta registrar formularios.
Estiloscrear una clase Diálogo modal y empezar a formarse 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-transition: opacidad de 400 ms de fácil entrada; -moz-transition: opacidad de 400 ms de fácil entrada: ninguna;
Nuestra ventana tendrá una posición fija, es decir, se moverá hacia abajo si te desplazas por la página cuando ventana abierta. Además, nuestro fondo negro se expandirá hasta ocupar 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 las transiciones para mostrar nuestra ventana modal y la ocultamos en un estado inactivo.
Quizás no conozcas la propiedad eventos de puntero, pero le permite controlar cómo reaccionarán los elementos a los clics del mouse. Establecemos el valor a su valor para la clase. Diálogo modal, ya que el enlace no debería responder a los clics del mouse cuando la pseudoclase está activa ":objetivo".
Ahora agregamos una pseudoclase. :objetivo y estilos para la ventana modal.
ModalDialog:objetivo (display: block; pointer-events: auto; ) .modalDialog > div ( ancho: 400px; posición: relativa; margen: 10% auto; relleno: 5px 20px 13px 20px; radio de borde: 10px; fondo: # fff; fondo: -moz-linear-gradient(#fff, #999); fondo: -webkit-linear-gradient(#fff, #999); )
pseudoclase objetivo cambia el modo de visualización del elemento, por lo que nuestra ventana modal se mostrará cuando se haga clic en el enlace. También cambiamos el valor de la propiedad. eventos de puntero.
Definimos el ancho y la posición de la ventana modal en la página. También definimos un degradado para el fondo y las esquinas redondeadas.
cerrando la ventanaAhora necesitamos implementar la funcionalidad de cierre de ventana. Formando la apariencia del botón:
Cerrar (fondo: #606061; color: #FFFFFF; altura de línea: 25px; posición: absoluta; derecha: -12px; alineación de texto: centro; arriba: -10px; ancho: 24px; decoración de texto: ninguna; fuente- peso: negrita; -webkit-border-radius: 12px; -moz-border-radius: 12px; -moz-box-shadow: 1px 3px #000; :desplazar el cursor (fondo: #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 clara. Cuando pase el mouse sobre el botón, cambiaremos el color de fondo.
Modales, superposiciones, diálogos, como quiera que los llames, es hora de repensar este patrón de interfaz de usuario. Cuando aparecieron por primera vez en escena, los modales eran una solución elegante a un problema de interfaz de usuario. Primero, simplifican la interfaz de usuario. En segundo lugar, ahorrar espacio en la pantalla. Desde entonces, los diseñadores han adoptado fácilmente los modales y algunos los han llevado al extremo. Los modales se han convertido en la versión actual de la temida ventana emergente. Los usuarios encuentran molestas las ventanas modales y han aprendido a cerrarlas de forma instintiva y automática.
Definición:Una ventana modal es un elemento que se encuentra en la parte superior de la ventana principal de la aplicación. Bloquea la ventana principal, pero la deja visible detrás de la ventana modal secundaria. Los usuarios deben interactuar con la ventana modal antes de poder regresar a solicitud para padres. — Wikipedia
UsoPuede utilizar una ventana modal siempre que lo necesite:
Atraer la atención del usuarioÚselo cuando desee interrumpir la tarea actual del usuario para llamar su atención sobre algo más importante.
Requiere entrada del usuarioÚselo cuando desee obtener información del usuario. Por ejemplo, un formulario de registro y autorización.
Espectáculo información adicional en contextoÚselo si desea mostrar información adicional sin perder el contexto de la página principal. Por ejemplo, mostrar imágenes o vídeos más grandes.
Mostrar información adicional (fuera de contexto)Utilícelo cuando desee mostrar información que no esté directamente relacionada con la página principal u otros parámetros “independientes” de otras páginas. Por ejemplo, notificaciones.
Nota: No utilice modales para mostrar mensajes de error, mensajes de éxito de tareas o mensajes de advertencia. Déjalos en la página.
Anatomía de una ventana modal.Las superposiciones mal implementadas pueden interferir con la finalización de la tarea. Para asegurarse de que su ventana modal no moleste a los usuarios, considere lo siguiente:
1. Escotilla de escapeOfrezca a los usuarios una forma de escapar dándoles una forma de cerrar la ventana modal. Esto se puede lograr de las siguientes maneras:
- Botón cancelar
- botón cerrar
- Tecla de escape
- Haga clic fuera de la ventana
Consejo de accesibilidad: cada ventana modal debe tener un control de teclado accesible para cerrar la ventana. Por ejemplo, la tecla Escape debería cerrar la ventana.
2. TítuloProporcione al usuario contexto con un título modal. Esto permite a los usuarios saber dónde está porque no se han ido. pagina de inicio.
Después de hacer clic en el botón Tweet — Encabezado modal: crea un nuevo tweet. Da contexto. Consejo: La etiqueta del botón (que abre la ventana modal) y el título modal deben coincidir
3. BotónLas etiquetas de los botones deben contener nombres claros. Esto se aplica a cualquier botón. Para ventanas modales, el botón "cerrar" debe representarse como un icono de botón "cerrar" o una "x".
Invision tiene iconos de botones claros Nota: No hagas que el ícono del botón sea confuso. Si el usuario intenta cancelar una acción y aparece la ventana modal con OTRO botón de cancelar, se produce confusión. “¿Estoy cancelando la cancelación? ¿O lo continúo?
4. Determinación del tamaño y ubicación.Una ventana modal no debe ser demasiado grande ni demasiado pequeña, solo desea que tenga el tamaño correcto. El objetivo es preservar el contexto, por lo que la ventana modal no debería ocupar toda la pantalla. El contenido debe coincidir con la ventana del modelo. Si se requiere una barra de desplazamiento, puede crear una nueva página.
- Ubicación — en la parte superior de la pantalla, porque en formulario movil La ventana modal puede perderse si se coloca debajo de ella.
- Tamaño — No utilice más del 50% de la pantalla de la ventana del modelo.
Cuando abres una ventana modal, utiliza el efecto de caja de luz (oscurece el fondo). Esto llama la atención sobre la ventana modal e indica que el usuario no puede interactuar con la página principal.
Consejo de accesibilidad: establezca el foco del teclado en la ventana modal.
6. El usuario abre una ventana modal.No sorprenda a los usuarios con una ventana modal emergente. Deje que una acción del usuario, como hacer clic en un botón, seguir un enlace o seleccionar una opción, active una ventana modal. Las ventanas modales de apertura automática pueden sorprender al usuario y hacer que se cierren rápidamente.
Ventana modal causada al presionar el botón Iniciar sesión Ventanas modales en dispositivos móviles
Los modales y los dispositivos móviles generalmente no funcionan bien juntos. Ver contenido es difícil porque los modales son demasiado grandes, ocupan demasiado espacio en la pantalla o son demasiado pequeños. Agregue elementos como el teclado de un dispositivo y barras de desplazamiento anidadas. Los usuarios sólo pueden mover los dedos y hacer zoom, intentando captar el campo de la ventana modal. Existen mejores alternativas para las ventanas modales, por lo que no deben usarse en dispositivos móviles.
Una ventana modal bien hecha — Accesibilidad de Facebook 
Al crear ventanas modales, no olvide agregar controles de teclado accesibles. Considere lo siguiente:
Abrir una ventana modal — el elemento que abre el cuadro de diálogo debe ser accesible desde el teclado.
Mover el foco a un cuadro de diálogo: Cuando una ventana modal está abierta, el foco del teclado debe moverse al principio del cuadro de diálogo.
Controlar el foco del teclado — Cuando el foco se mueve a un cuadro de diálogo, debe estar "bloqueado" dentro de él hasta que se cierre el cuadro de diálogo.
Cerrar un cuadro de diálogo — Cada ventana modal debe tener un control de teclado accesible para cerrar esa ventana.
ARIAEl estándar Accessible Rich Internet Applications (ARIA) define formas de mejorar la accesibilidad del contenido web y las aplicaciones web.
Las siguientes etiquetas ARIA pueden resultar útiles al crear una ventana modal accesible: Role = “dialog”, aria - oculta, aria - etiqueta
Además, tenga cuidado con los usuarios con baja visión. pueden usar lupas de pantalla en monitores para ampliar el contenido de la pantalla. Después de hacer zoom, el usuario solo puede ver una parte de la pantalla. En este caso, las ventanas modales se mostrarán de la misma forma que en los dispositivos móviles.
ConclusiónSi la gente ha aprendido a intentar cerrar automáticamente las ventanas modales, ¿por qué querrías usarlas?
Captar la atención del usuario, mantener el contexto y simplificar la interfaz de usuario son los grandes beneficios de las ventanas modales. Sin embargo, también tienen desventajas, ya que interrumpen la experiencia del usuario y hacen imposible interactuar con la página principal al ocultar el contenido detrás de una ventana modal. Es posible que una ventana modal no siempre sea la respuesta. Al elegir, considere lo siguiente:
Lista de verificación
- ¿Cuándo mostramos ventanas modales?
- ¿Cómo mostramos las ventanas modales?
- ¿Cómo se ven las ventanas modales?
- ¿Qué información proporcionamos y recopilamos?
Existe un componente de interfaz de usuario alternativo para ventanas modales: no modal o conocido como brindis (término utilizado por Microsoft y Google en Material Design). Lea mi próxima publicación para obtener más información.
Para mostrar mensajes importantes o simplemente cambios realizados en el sitio, puede utilizar ventanas emergentes. Hay dos tipos de ventanas emergentes: regulares y modales.
Nota: las ventanas modales se diferencian de las ventanas normales en que mientras la ventana modal está abierta, el usuario no puede interactuar con otros elementos del sitio hasta que se cierre la ventana modal.
Puedes ver un ejemplo de una ventana modal con usando javascript usando el método alerta().
ventana emergenteEl primer paso para crear una ventana emergente es crear un elemento (o cualquier otro elemento) y darle estilo:
Título del documento .okno ( ancho: 300px; alto: 50px; alineación de texto: centro; relleno: 15px; borde: 3px sólido #0000cc; radio de borde: 10px; color: #0000cc; ) ¡Ventana emergente!
Esto se utilizará como una ventana emergente. Ahora lo ocultamos usando el valor none de la propiedad de visualización y agregamos un enlace que, al hacer clic, hará que aparezca una ventana emergente:
Título del documento #okno ( ancho: 300px; alto: 50px; alineación de texto: centro; relleno: 15px; borde: 3px sólido #0000cc; radio del borde: 10px; color: #0000cc; pantalla: ninguna; ) #okno:objetivo (pantalla: bloquear;) ¡Ventana emergente!
Llamar a la ventana emergente Intentar »
Usando la pseudoclase:objetivo seleccionamos y aplicamos estilos al elemento al que se navegó. Por lo tanto, después de hacer clic en el enlace, el valor de la propiedad de visualización del elemento cambiará de none a block.
Ahora debemos colocarlo en el medio de la página para que parezca una ventana emergente. Déjelo absolutamente posicionado y céntrelo vertical y horizontalmente:
¡Ventana emergente! Luego posicionamos el elemento.
y estírelo a todo el ancho y alto de la ventana. Lo configuramos para mostrar: ninguno; y redirigir nuestro enlace a él:
Título del documento #main ( mostrar: ninguno; posición: absoluta; arriba: 0; izquierda: 0; ancho: 100%; alto: 100%; ) #okno ( ancho: 300px; alto: 50px; alineación de texto: centro; relleno : 15px; borde: 3px sólido #0000cc; color: #0000cc; posición: 0; abajo: 0; (pantalla: bloque;) ¡Ventana emergente! Llamar a la ventana emergente Intentar » Eliminar display: none del elemento. (ya no es necesario, ya que ahora nos estamos escondiendo
). Como resultado, el padre
ahora oculta la ventana emergente redirigiendo la selección a la página.Esto completa la creación de una ventana emergente simple.
Título del documento #okno ( ancho: 300px; alto: 50px; alineación de texto: centro; relleno: 15px; borde: 3px sólido #0000cc; radio del borde: 10px; color: #0000cc; pantalla: ninguna; posición: absoluta; arriba : 0; derecha: 0; izquierda: 0; margen: automático;) #ventana: objetivo (pantalla: bloque;)
ventana emergente de llamada
El siguiente paso para crear una ventana modal completa es agregar un botón que ocultará nuestra ventana. Crearemos un botón a partir de un enlace normal, lo agregaremos al nuestro y lo diseñaremos:
Título del documento #okno ( ancho: 300px; alto: 50px; alineación de texto: centro; relleno: 15px; borde: 3px sólido #0000cc; radio del borde: 10px; color: #0000cc; pantalla: ninguna; posición: absoluta; arriba : 0; derecha: 0; izquierda: 0; margen: automático; ) #ventana: objetivo (pantalla: bloque;) ; relleno: 0 12px; : #e6e6ff;)
Cerrar ventana Abrir ventana emergente Intente »
Para lograr el efecto de atenuar la página al mostrar una ventana modal, debe colocar todo el código de ventana existente en una ventana adicional:
¡Ventana emergente!
Cerrar ventana
Coloque el principal y estírelo a todo el ancho y alto de la ventana. Lo configuramos para mostrar: ninguno; y redirija el enlace de llamada de la ventana hacia él.
Para el niño, elimine la visualización: ninguna; (Ya no es necesario ya que el padre ocultará todo lo que contiene). Como resultado, el padre ahora es responsable de mostrar la ventana modal y atenuar el fondo de la página, y el niño solo es responsable de decorar la ventana misma:
Título del documento #zatemnenie (fondo: rgba(102, 102, 102, 0.5); ancho: 100%; alto: 100%; posición: absoluta; arriba: 0; izquierda: 0; pantalla: ninguna; ) #okno (ancho: 300px; alineación de texto: 15px; radio de borde: 10px; absoluto: 0; margen: automático; fondo: #fff; ; borde: 1px sólido #0000cc; color: #0000cc; relleno: 0 12px; fondo: #f2f2f2; puntero .close: hover (fondo: #e6e6ff;)
Nota: si necesita que el usuario vea inmediatamente una ventana emergente al ingresar a la página (y no llamarla a través de un enlace), entonces deberá ingresar la dirección de la página junto con la identificación de la ventana (por ejemplo, la dirección puede se ve así: site.ru/papka/documet html#window).
En el artículo sobre la creación de una ventana modal usando CSS, analizamos qué es una ventana modal y por qué es necesaria. También creamos una ventana usando solo CSS. En este artículo describiré cómo crear una ventana modal de JavaScript. Más específicamente, usaremos la biblioteca jquery para crear.
Entonces comencemos a crear una ventana modal en jquery. Para complicar el problema, establezcamos la siguiente condición. Necesitaremos crear una ventana modal responsiva. Y la adaptabilidad consistirá en que cuando el tamaño de la pantalla disminuya, la ventana también disminuirá. Comencemos a crear una ventana modal jquery adaptable con marcado html.
¡Haga clic aquí! X Solicitar una llamada
Creo que todo está claro con el código. Contamos con un wrapper.wrapper, donde se ubica el contenido de nuestro sitio. Hay un botón para llamar a una ventana modal con el ID gowindow, la ventana misma con el ID modal_window y una capa superpuesta myoverlay. Ahora escribamos estilos CSS.
Envoltura ( ancho: 100%; margen: automático; ancho: automático;/*igual que 100%*/ ancho máximo: 960px;/*ancho máximo de envoltura*/ borde: 1px sólido #000; color de fondo: # F5F9FB; ) .button( /*-------*/ ) #modal_window ( ancho: 34%;/*para capacidad de respuesta*/ alto: 300px; radio-borde: 10px; borde: 3px #fff sólido; fondo: # e0e0e0; margin-top: -30%; margin-left: 33%; display: none; /*transparencia completa para la animación */ z-index: 5000 /*la ventana debe ser la capa superior*/ padding-top: 20px; ; alineación de texto: centro; posición: relativa; ) #modal_window #window_close (ancho: 21px; altura: 21px; posición: absoluta; arriba: 10px; derecha: 10px; cursor: puntero; visualización: bloque; ) #myoverlay (z -index: 3000; /*sobre todas las capas pero debajo de la ventana */ posición: fijo; /*para superponer el sitio*/ color de fondo: #000; ancho: 100%; *pantalla completa */ arriba: 0; cursor: puntero;
Describamos el código CSS. Configuramos block.wrapper para que sea adaptable, cambia según el tamaño de la pantalla, pero no más de 960 px. No mostraré el código del botón. Establecemos el ancho de la ventana #modal_window como un porcentaje, el ancho dependerá del ancho del .wrapper. Para centrar la ventana, establezca el margen en 33%. Se calcula como 50%-17%, donde 17% es la mitad del ancho de la ventana. Ocultamos la ventana con las propiedades display: none y opacity: 0. Con el código #window_close y #myoverlay, creo que todo queda claro. Ahora escribamos el código jquery. Supondremos que jqery ya está conectado.
$(document).ready(function() ( $("#gowindow").click(function())(//haga clic en el botón $("#myoverlay").fadeIn(400, //muestra la capa superpuesta function() ( $("#modal_window") .css("display", "block") //hacer visible la ventana.animate((opacity: 1, top: "50%"), 200); //aumentar la transparencia, la ventana se mueve suavemente ) )); /* eliminar la ventana */ $("#window_close, #myoverlay").click(function())( //haga clic en la capa superpuesta o cruce $ ("#modal_window") .animate((opacity : 0, top: "45%"), 200, //la transparencia está activada, la ventana sube function())( $(this).css("display", "none"); //hacer la ventana invisible $("# myoverlay").fadeOut(400); //eliminar la capa superpuesta ));
Creo que el código Js no necesita explicación, ya que lo comenté bastante bien. Eso es todo lo que pienso, así que resumámoslo. Hicimos una ventana modal responsiva de jquery simple
3. Ejemplo de una ventana modal jQuery llamada desde un enlace (de Demo)
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 referencia, descarga de archivos y mucho más. En este tutorial ofreceré varios ejemplos sobre cómo crear las ventanas modales más simples.
Crear una ventana modal emergente simple Comencemos a buscar en el código una ventana modal simple que aparecerá inmediatamente.código jQuery
$(documento).listo(función()
{
alert("Texto en ventana emergente");
});
Pega el código en cualquier parte del cuerpo de tu página. Inmediatamente después de que se cargue la página, sin ningún comando, verá una ventana similar a esta:
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:
$(ventana).cargar(función()
{
alert("¡La página ha completado la carga!)");
});
A menudo puede ver que los formularios de inicio de sesión y registro se encuentran en dichas ventanas. Pongámonos manos a la obra
Primero, escribamos la parte html. Colocamos este código en el cuerpo de su documento.
Llamar a una ventana modal
Texto de ventana modal
Cerca
Texto en una ventana modal.
Código CSS. Ya sea en un archivo CSS separado o en el encabezado.
cuerpo (
familia de fuentes:verdana;
tamaño de fuente: 15px;
}
.link (color:#fff; decoración de texto:ninguno)
.link:hover (color:#fff; decoración de texto:subrayado)
#mascarilla (
posición:absoluta;
izquierda: 0;
arriba: 0;
índice z: 9000;
color de fondo:#000;
pantalla: ninguna;
}
#cajas.ventana (
posición:absoluta;
izquierda: 0;
arriba: 0px;
-arriba: 40px;
ancho: 440 px;
altura: 200 px;
pantalla: ninguna;
índice z: 9999;
relleno: 20px;
desbordamiento: oculto;
}
#cuadros #diálogo (
ancho: 375 px;
altura: 203px;
relleno: 10px;
color de fondo: #ffffff;
}
.arriba(
posición:absoluta;
izquierda: 0;
arriba: 0;
ancho: 370 px;
altura: 30 píxeles;
fondo: #0085cc;
relleno: 8px 20px 6px 10px;
}
.cerca(
flotador:derecha;
}
.contenido(
relleno superior: 35px;
}
En el código jQuery nos centraremos en la posición de la ventana modal y la máscara, en nuestro caso el oscurecimiento gradual del fondo.
¡Atención! ¡No olvides incluir la biblioteca en el encabezado del documento!
Conexión de la biblioteca desde el sitio web de Google. Bueno, el código jQuery en sí.
código jQuery
$(documento).listo(función() (
$("a").hacer clic(función(e) (
e.preventDefault();
var id = $(this).attr("href");
var alturamascara = $(documento).altura();
var MaskWidth = $(ventana).width();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#máscara").fadeIn(1000);
$("#mask").fadeTo("lento",0.8);
var winH = $(ventana).height();
var winW = $(ventana).width();
$(id).css("arriba", winH/2-$(id).height()/2);
$(id).css("izquierda", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".ventana .cerrar").hacer clic(función (e) (
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").hacer clic(función () (
$(esto).ocultar();
$(".ventana").ocultar();
});
});