Las ventanas emergentes están en toda la Web. Puedes verlas en menús, sugerencias de activación y diálogos, que podrían manifestarse como la configuración de la cuenta, los widgets de divulgación y las vistas previas de las tarjetas de productos. A pesar de la prevalencia de estos componentes, compilarlos en navegadores sigue siendo sorprendentemente engorroso. Debes agregar secuencias de comandos para administrar el enfoque, los estados de apertura y cierre, hooks accesibles en los componentes, vinculaciones de teclado para ingresar y salir de la experiencia, y todo eso antes de que comiences a desarrollar la funcionalidad principal útil, única y central de tu ventana emergente.
Para solucionar este problema, los navegadores implementarán un nuevo conjunto de APIs de HTML declarativas para crear ventanas emergentes, a partir de la API de popover en Chromium 114.
El atributo de ventana emergente
En lugar de administrar toda la complejidad por tu cuenta, puedes permitir que el navegador la controle con el atributo popover y el conjunto posterior de funciones. Compatibilidad con ventanas emergentes HTML:
- Promoción en la capa superior. Las ventanas emergentes aparecerán en una capa separada sobre el resto de la página, por lo que no es necesario que te muevas por el índice z.
- Funcionalidad para descartar ligeros. Si haces clic fuera del área de la ventana emergente, se cerrará la ventana emergente y se volverá a mostrar el enfoque.
- Administración del enfoque predeterminada: Cuando se abre la ventana emergente, la siguiente pestaña se detiene dentro de la ventana emergente.
- Vinculaciones de teclado accesibles. Si presionas la tecla
esc, se cerrará la ventana emergente y se devolverá el enfoque. - Vinculaciones de componentes accesibles. La conexión de un elemento de ventana emergente a un activador de ventana emergente de forma semántica
Ahora puedes crear ventanas emergentes con todas estas funciones sin usar JavaScript. Un elemento emergente básico requiere tres elementos:
- Un atributo
popoveren el elemento que contiene la ventana emergente. - Una
iden el elemento que contiene la ventana emergente - Una
popovertargetcon el valor delidde la ventana emergente en el elemento que la abre.
<button popovertarget="my-popover"> Open Popover </button>
<div id="my-popover" popover>
<p>I am a popover with more information.</p>
</div>
Ahora tienes una ventana emergente básica completamente funcional.
Esta ventana emergente se puede usar para brindar información adicional o como un widget de divulgación.
Valores predeterminados y anulaciones
De forma predeterminada, como en el fragmento de código anterior, configurar una ventana emergente con un popovertarget significa que el botón o elemento que abre la ventana emergente la abrirá y cerrará. Sin embargo, también puedes crear ventanas emergentes explícitas mediante popovertargetaction. Esto anula la acción predeterminada de activar o desactivar. Estas son las opciones de popovertargetaction:
popovertargetaction="show": Muestra la ventana emergente.
popovertargetaction="hide": Oculta la ventana emergente.
Con popovertargetaction="hide", puedes crear un botón de "cerrar" dentro de una ventana emergente, como en el siguiente fragmento:
<button popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Close</span>
</button>
Ventanas emergentes automáticas frente a ventanas emergentes manuales
Usar el atributo popover por sí solo es un atajo para popover="auto". Cuando se abra, la popover predeterminada forzará el cierre de otras ventanas emergentes automáticas, excepto las de principales. Se puede descartar con la opción para descartar la luz o un botón de cerrar.
Por otro lado, cuando se configura popover=manual, se crea otro tipo de ventana emergente: una ventana emergente manual. No fuerzan el cierre de ningún otro tipo de elemento y no se cierran mediante la función de descartar con luz. Debes cerrarlos con un temporizador o una acción de cierre explícita. Los tipos de ventanas emergentes apropiadas para popover=manual son los elementos que aparecen y desaparecen, pero que no deberían afectar el resto de la página, como una notificación de aviso.
Si exploras la demostración anterior, verás que, si haces clic fuera del área de la ventana emergente, no se descartará la ventana emergente con luz. Además, si se abrieran otras ventanas emergentes, no se cerrarían.
Para revisar las diferencias, haz lo siguiente:
Ventanas emergentes con popover=auto:
- Cuando se abra, fuerza el cierre de otras ventanas emergentes.
- Puede descartar la pantalla a la luz.
Ventanas emergentes con popover=manual:
- No fuerces el cierre de ningún otro tipo de elemento.
- No lo descartes con luz. Ciérralo con una acción para activar o desactivar.
Estilos emergentes
Hasta ahora, aprendiste sobre las ventanas emergentes básicas en HTML. Sin embargo, popover también incluye algunas funciones de estilo interesantes. Una de ellas es la capacidad de aplicar diseño a ::backdrop.
En las ventanas emergentes auto, es una capa justo debajo de la capa superior (donde se encuentra la ventana emergente), que se encuentra sobre el resto de la página. En el siguiente ejemplo, ::backdrop recibe un color semitransparente:
#size-guide::backdrop {
background: rgb(190 190 190 / 50%);
}
Cuál es la diferencia entre una popover y una dialog
Es importante tener en cuenta que el atributo popover no proporciona semántica por sí solo. Si bien ahora puedes compilar experiencias similares a un diálogo modal con popover="auto", existen algunas diferencias clave entre ambos:
Un elemento dialog abierto con dialog.showModal (un diálogo modal) es una experiencia que requiere la interacción explícita del usuario para cerrar la ventana modal.
Un popover admite la función de descartar la luz. Una dialog modal no lo hace.
Un diálogo modal inerte el resto de la página. Una popover no.
La demostración anterior es un diálogo semántico con comportamiento de ventana emergente. Esto significa que el resto de la página no está inerte y que la ventana emergente de diálogo tiene un comportamiento de descarte ligero. Puedes crear este diálogo con el comportamiento de las ventanas emergentes usando el siguiente código:
<button popovertarget="candle-01">
Quick Shop
</button>
<dialog popover id="candle-01">
<button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
<div class="product-preview-container">
...
</div>
</dialog>
Disponible dentro de poco tiempo
Entrada y salida interactivas
La capacidad de animar propiedades discretas, incluida la animación desde y hacia display: none, y la animación desde y hacia la capa superior, aún no está disponible en los navegadores. Sin embargo, están previstos para una próxima versión de Chromium, después de esta versión.
Con la capacidad de animar propiedades discretas y el uso de :popover-open y @starting-style, podrás configurar estilos antes y después del cambio para habilitar transiciones fluidas cuando abras y cierres ventanas emergentes. Tomemos el ejemplo anterior. Animarla hacia adentro y afuera se ve mucho más fluida y admite una experiencia del usuario más fluida:
Posicionamiento del anclaje
Las ventanas emergentes son excelentes cuando deseas posicionar una alerta, una ventana modal o una notificación en función del viewport. Sin embargo, las ventanas emergentes también son útiles para menús, información sobre la herramienta y otros elementos que deben posicionarse en relación con otros elementos. Aquí es donde entra en juego el anclaje de CSS.
En la siguiente demostración del menú radial, se usa la API de ventanas emergentes junto con el posicionamiento de anclajes de CSS para garantizar que el elemento #menu-items de ventana emergente siempre esté anclado a su activador de activación, el botón #menu-toggle.
La configuración de anuncios fijos es similar a la de ventanas emergentes:
<button id="menu-toggle" popovertarget="menu-items">
Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
<li class="item">...</li>
<li class="item">...</li>
</ul>
Para configurar un ancla, asígnale un id (en este ejemplo, #menu-toggle) y, luego, usa anchor="menu-toggle" para conectar los dos elementos. Ahora, puedes usar anchor() para aplicar estilo a la ventana emergente. Un menú emergente centrado que está anclado a la línea de base del botón de activación de ancla se puede diseñar de la siguiente manera:
#menu-items {
bottom: anchor(bottom);
left: anchor(center);
translate: -50% 0;
}
Ahora tienes un menú emergente completamente funcional que está anclado en el botón de activación y tiene todas las funciones integradas de este tipo de ventanas, sin necesidad de usar JavaScript.
Conclusión
La API de ventana emergente es el primer paso en una serie de nuevas capacidades destinadas a hacer que la compilación de aplicaciones web sea más fácil de administrar y más accesible de forma predeterminada. Estamos ansiosos por ver cómo usarás las ventanas emergentes.