Ventana emergente y diálogo

Un elemento emergente es cualquier elemento con un atributo popover y es útil para una amplia variedad de patrones interactivos, como tooltips, alertas, mensajes emergentes y mucho más.

<div id="my-popover" popover>My popover content</div>

El atributo popover oculta el elemento de forma predeterminada, y debes proporcionar una forma para que los usuarios lo abran. Si bien los elementos emergentes se colocan en la capa superior, por encima de todo el contenido, no son modales. Esto significa que aún puedes interactuar con el contenido fuera de la ventana emergente.

Cómo controlar ventanas emergentes

Antes de explorar los diferentes tipos de ventanas emergentes y cómo se comportan, veamos cómo abrirlas y cerrarlas.

De forma declarativa

Los elementos emergentes se pueden controlar por completo en HTML, sin necesidad de usar JavaScript, con botones (y entradas con el tipo button) y el atributo popovertarget.

La ventana emergente del fragmento de código anterior tiene un id de my-popover, que puedes usar para hacer referencia a la ventana emergente.

<button popovertarget="my-popover">Toggle</button>

También puedes especificar si un botón debe abrir o cerrar una ventana emergente con popovertargetaction="show" y popovertargetaction="hide".

Con JavaScript

También puedes controlar una ventana emergente con JavaScript, lo que resulta útil cuando deseas mostrar una ventana emergente en respuesta a algo más que el clic de un botón por parte del usuario. Para ello, debes obtener el elemento de ventana emergente y, luego, llamar a showPopover(), hidePopover() o togglePopover().

Tipos de ventanas emergentes

Cuando agregas una ventana emergente a tu sitio, hay muchas interacciones que debes tener en cuenta. ¿Cómo se abre? ¿Cómo pueden descartarlo los usuarios? ¿Qué sucede con otros elementos emergentes abiertos? Existen tres tipos de ventanas emergentes, y puedes elegir el tipo que proporcione el comportamiento y las interacciones que requiere tu caso de uso.

Elementos emergentes automáticos

Los elementos emergentes automáticos tienen la mayor cantidad de funciones integradas y son el valor predeterminado si no especificas un tipo.

<div id="popover" popover>My popover</div>

En muchos casos, no querrás tener varios elementos emergentes abiertos al mismo tiempo, por lo que los elementos emergentes automáticos cierran otros elementos emergentes automáticos cuando se abren. También admiten el "descarte ligero", lo que significa que, si haces clic fuera de la ventana emergente, se cierra automáticamente. También se puede cerrar con la tecla Esc.

Elementos emergentes manuales

Si bien el comportamiento de aparición automática cubre muchos casos de uso, hay instancias en las que es posible que necesites más control sobre tus ventanas emergentes. Con las ventanas emergentes manuales, tienes mucho más control y también eres responsable de gran parte del comportamiento.

<div id="popover" popover="manual">My popover</div>

Esta ventana emergente solo se cerrará cuando la cierres de forma explícita. No se puede cerrar con el descarte ligero ni con la tecla Esc. Sin embargo, sí te permite abrir varias ventanas emergentes a la vez.

Notificaciones emergentes de sugerencias

También puedes usar ventanas emergentes para agregar sugerencias a tu página. En este patrón, deseas poder colocar el cursor sobre un elemento y ver una descripción. Solo una debe estar abierta a la vez. Si usas ventanas emergentes automáticas, abrir una cerrará cualquier otra ventana emergente automática abierta. Si usas ventanas emergentes manuales, debes implementar manualmente gran parte del comportamiento, incluido el cierre de otras ventanas emergentes. Las ventanas emergentes de sugerencias proporcionan una tercera opción con un comportamiento similar al de las ventanas emergentes automáticas. Sin embargo, abrir una ventana emergente de sugerencia no cierra las ventanas emergentes automáticas.

<div id="popover" popover="hint">My popover</div>

Las ventanas emergentes de sugerencias son útiles para la información complementaria que es secundaria con respecto al contenido principal. A menudo, querrás activar ventanas emergentes de sugerencias con eventos que no sean de clic, como el desplazamiento del mouse o el enfoque.

Cómo posicionar tu ventana emergente

De forma predeterminada, las ventanas emergentes se abrirán en el centro de la pantalla. Se agregan a la capa superior, por encima de todo tu otro contenido, y se pueden posicionar en relación con el viewport.

Esto no siempre es ideal, ya que, a menudo, querrás colocar la ventana emergente cerca del elemento que la activa. El posicionamiento de anclaje proporciona una forma de hacerlo.

Hay dos pasos para posicionar la ancla: definir el elemento de anclaje y colocar el elemento en relación con esa ancla. Los elementos emergentes pueden controlar el primer paso, ya que establecen un anclaje implícito para ti. Cuando abres un elemento emergente con <button popovertarget>, el botón es el anclaje implícito. Si abres un elemento emergente con JavaScript, puedes establecer el anclaje implícito con la opción source.

De forma predeterminada, la ventana emergente se centra con margin: auto. Para usar el posicionamiento de anclaje, es probable que debas anularlo configurando margin: unset.

Estilos y animaciones

El seudoelemento ::backdrop

Las ventanas emergentes se abren en una capa superior, por encima de todo el contenido de la página. Debajo del elemento emergente, hay un seudoelemento ::backdrop al que se le puede aplicar un diseño.

Es importante tener en cuenta que el contenido fuera de un elemento emergente no es inerte: aún puedes hacer clic en los botones y usar el teclado para navegar por la página. No debes ocultar el contenido de la página, por ejemplo, aplicando un efecto de desenfoque intenso o configurando el fondo con un color opaco.

La seudoclase :popover-open

Supongamos que deseas diseñar el contenido de tu elemento emergente con cuadrículas de CSS. Agregas [popover]{ display: grid } y, de repente, todos tus elementos emergentes son visibles. Esto se debe a que los elementos emergentes se ocultan con display: none. Puedes usar la seudoclase :popover-open para aplicar estilos solo cuando el elemento emergente está abierto.

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

:popover-open también es útil cuando animas una ventana emergente.

Cómo animar ventanas emergentes

La animación de una ventana emergente consta de 3 pasos:

1. @starting-style {popover:popover-open { } }: Son los estilos iniciales de la ventana emergente en cuanto se hace visible. Ten en cuenta que esto debe definirse en tu hoja de diseño después del paso 2.
2. popover:popover-open { }: Son los diseños del elemento emergente cuando está abierto.
3. popover { }: Son los estilos a los que se dirige la ventana emergente cuando se cierra.

Un elemento emergente se oculta con display: none cuando no está abierto. Para animar esto, deberás establecer transition-behavior: allow-discrete y agregar display a la lista de propiedades en transition.

Si posicionas tu elemento emergente con un anclaje implícito, también deberás agregar overlay en la lista de propiedades en transition. La relación de anclaje implícita se quita una vez que el elemento emergente se quita de la capa superior, por lo que agregar una transición a la propiedad overlay retrasa eso hasta que se complete la transición de salida.

Interacciones entre ventanas emergentes

Es probable que tengas varios elementos emergentes en una página, y la forma en que interactúan depende de su tipo y de cómo se usan.

Elementos emergentes anidados

En algunos casos, es posible que debas abrir una ventana emergente desde otra ventana emergente. Por ejemplo, es posible que tengas un menú desplegable y que uno de los elementos del menú abra un submenú. Cuando el usuario cierre el menú principal, no querrás que el submenú permanezca abierto. Los elementos emergentes pueden ayudar a controlar eso automáticamente.

Si abres un elemento emergente de sugerencia desde otro elemento emergente de sugerencia, o un elemento emergente automático desde otro elemento emergente automático, los elementos emergentes se colocan en una pila. Si cierras una ventana emergente, también se cerrarán todas las ventanas emergentes que le sigan en la pila. Esto también funciona con el descarte ligero: si haces clic en un elemento emergente, se cerrarán todos los elementos emergentes posteriores de la pila, pero los anteriores permanecerán abiertos.

Se agrega una ventana emergente a la pila si su elemento de origen está dentro de una ventana emergente. El elemento fuente se configura automáticamente cuando usas popovertarget en un botón o con JavaScript configurando la opción source cuando llamas a .showPopover({source}) o .togglePopover({source}).

Hay una pila para los elementos emergentes automáticos y otra para los elementos emergentes de sugerencias. Sin embargo, si abres un elemento emergente de sugerencia desde dentro de un elemento emergente automático, se agrega a la pila automática.

Recuerda que las ventanas emergentes de sugerencias están diseñadas para brindar información más simple y transitoria, por lo que no puedes activar una ventana emergente automática desde una ventana emergente de sugerencias.

Si usas ventanas emergentes manuales, debes administrar todo esto de forma manual.

Cómo cerrar otros tipos de ventanas emergentes

Aprendiste que abrir un elemento emergente automático cierra otros elementos emergentes automáticos, pero ¿cómo interactúan los diferentes tipos? Explora esto con un ejemplo de una página que usa los tres tipos. Hay un menú de navegación con botones que usan ventanas emergentes automáticas para abrirse y cerrarse. Hay texto en la página que usa ventanas emergentes de sugerencias para mostrar Tooltips contextuales. Por último, hay un aviso con una ventana emergente manual para informar al usuario que se completó una tarea en segundo plano.

Las sugerencias son efímeras y aparecen cuando colocamos el cursor sobre el texto. Solo esperamos que se vea una sugerencia a la vez, y que la activación de una segunda ventana emergente de sugerencia cierre la primera.

Cuando abres el menú haciendo clic en un botón, la sugerencia se cierra por dos motivos. Primero, el clic fuera de la sugerencia activa un descarte ligero. En segundo lugar, cuando se abre un elemento emergente automático, se descartan todos los elementos emergentes de sugerencias abiertos. Esto se debe a que el usuario cambió su enfoque, y el contenido efímero de una ventana emergente de sugerencia ya no es relevante. Esto significa que, si llamas a showPopover() en un elemento emergente automático, se cerrará cualquier elemento emergente de sugerencia abierto.

Los menús desplegables son ventanas emergentes automáticas. Con los menús desplegables, se espera que solo uno esté abierto a la vez, y que abrir uno cierre el otro. Como viste, abrir un elemento emergente automático también cierra cualquier elemento emergente de sugerencia abierto.

Sin embargo, mientras un menú desplegable está abierto, es posible que quieras ver el contenido de una sugerencia no relacionada. Mostrar una sugerencia no cierra las ventanas emergentes automáticas.

Las ventanas emergentes manuales no se ven afectadas por las ventanas emergentes automáticas o de sugerencias, y, cuando se abren, no cierran ninguna ventana emergente automática o de sugerencias. Sin embargo, si abres un elemento emergente manual haciendo clic en un botón, se activará un descarte ligero de las sugerencias y los elementos emergentes automáticos.

Las interacciones entre los tipos de ventanas emergentes pueden parecer complejas, pero permiten patrones de uso comunes si se utilizan los tipos en las situaciones correctas. Si tus ventanas emergentes no interactúan según lo esperado, vuelve a revisar los tipos que estás usando.

Verifica tus conocimientos