Popups y modos nativos con el elemento de diálogo HTML5

, y el

Elementos, cada uno de los cuales establece una nueva sección de contenido de forma independiente. Puede colocarlo como un hijo del cuerpo, o anidarlo dentro de un elemento como un

o

-ambos enfoques son validos.

Los navegadores compatibles (Chrome 37+ y Opera 27+) representarán el

Elemento oculto por defecto, solo lo hace visible bajo petición con JavaScript usando espectáculo() o showModal (), y el cerrar() Método para ocultarlo de nuevo. Por lo general, ejecutaríamos este método dentro de un hacer clic evento, como asi:

var $ accountDelete = $ ('# delete-account'), $ accountDeleteDialog = $ ('# confirm-delete'); $ accountDelete.on ('click', function () $ accountDeleteDialog [0] .showModal ();); $ ('# cancel'). on ('click', function () $ accountDeleteDialog [0] .close ();); 

los espectáculo() v. showModal () Método

Cabe resaltar que espectáculo() y showModal () comportarse de manera diferente.

los espectáculo() El método revela el elemento de acuerdo con su posición en el flujo DOM. Si lo agregó inmediatamente antes de la etiqueta de cierre del cuerpo, puede aparecer en la parte inferior de la página web. Tendríamos que agregar estilos personalizados para ajustar su posición, por ejemplo, si queremos colocarlo centrado en la página. Estos estilos suelen utilizar índice z para apilar el elemento encima de los otros elementos, el posición propiedad establecida en absoluto, junto con izquierda y parte superior.

los showModal () El método, por otro lado, mostrará el elemento como modal. Se mostrará en el centro de la página de forma predeterminada, y se encuentra en la capa superior, como la API de pantalla completa que evita la interferencia causada por índice z, Posición relativa y desbordamiento del elemento padre..

En la mayoría de los casos, es probable que utilicemos la conveniencia de showModal () en vez de espectáculo() método.

Personalizar estilos

El cuadro de diálogo lleva el estilo predeterminado de los navegadores, que se puede anular fácilmente como la mayoría de los otros elementos. Por ejemplo, puede hacer que el borde del cuadro de diálogo sea más delgado, redondear las esquinas y agregar sombra paralela.

Además, cuando el

El elemento se muestra como un modal (usando el showModal () Método), tenemos un pseudo-elemento adicional., ::fondo, A nuestra disposición. los ::fondo el elemento reside inmediatamente debajo del cuadro de diálogo, cubriendo toda la ventana gráfica y el resto de los elementos debajo.

Es común diseñar el fondo con un color oscuro de baja opacidad; haga clic en el botón rojo para verlo en acción:

Añadiendo estilo con las transiciones

La personalización de los estilos de los cuadros de diálogo debería ser sencilla, pero ¿qué hay de agregar la transición a CSS? ¿Qué tal si revelamos gradualmente el cuadro de diálogo, utilizando un efecto de escala, más o menos cómo lo hace OS X??

Paso 1

Para empezar, reduciremos el cuadro de diálogo en un 90%, especificaremos la transición y lo pondremos fuera de la vista..

diálogo visibilidad: oculto; transformar: escala (0.1); transición: transformar 200ms;  

Paso 2

Ahora definimos un selector de clase que escalará el cuadro de diálogo hasta su tamaño deseado y lo hará visible..

dialog.dialog-scale visibilidad: visible; transformar: escala (1);  

Paso 3

Nuestro truco ahora es que "mantendremos" el cuadro de diálogo en su pequeña escala durante unos pocos milisegundos antes de agregar la clase. escala de diálogo. Para lograrlo utilizamos JavaScript's. setTimeout () Método para agregar la clase:

transición var $ accountDelete.on ('click', function () $ accountDeleteDialog [0] .showModal (); transition = setTimeout (function () $ accountDeleteDialog.addClass ('dialog-scale');, 0.5);)) ; 

Etapa 4

No olvidemos eliminar esta clase y borrar el timeOut cuando se cierra el cuadro de diálogo.

$ ('# cancel'). on ('click', function () $ accountDeleteDialog [0] .close (); $ accountDeleteDialog.removeClass ('dialog-scale'); clearTimeout (transición);); 

¡Ya estamos listos! Puedes darle un paseo en la siguiente demo:

Terminando

los

es De Verdad práctico, aunque todavía muy pobre en lo que respecta al soporte del navegador. Cuando todos los principales navegadores lo hayan implementado, seremos menos dependientes de las bibliotecas, nuestra estructura de contenido será más semántica, accesible de manera adecuada a la tecnología de asistencia, y tendremos una forma estándar de ofrecer diálogos modales..

http://caniuse.com/#feat=dialog

Hasta entonces, puedes usar el polyfill de Google Chrome para simularlo en navegadores no compatibles..

Recursos adicionales

• Especificación del elemento de diálogo HTML5
• Soporte del navegador de elementos de diálogo
• Cajas modales y modestas en diseño web
• Lo que puede que no sepa sobre la propiedad Z-Index

Diseño web