¡Falta muy poco! Una de las funciones que más me llama la atención está llegando a todos los navegadores modernos y es oficialmente parte de Baseline 2024. Y esta función es la API de Popover. Popover ofrece muchas primitivas increíbles y posibilidades para desarrolladores a fin de compilar interfaces en capas, como información sobre herramientas, menús, IU de enseñanza y mucho más.
Estos son algunos aspectos destacados de las funciones de ventana emergente:
- Promoción en la capa superior. Las ventanas emergentes aparecerán en la capa superior sobre el resto de la página, por lo que no es necesario que juegues con
z-index
. - 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
o la presionas dos veces, se cerrará la ventana emergente y se volverá a mostrar 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
Cómo crear ventanas emergentes
Crear ventanas emergentes es bastante sencillo. Si deseas usar valores predeterminados, lo único que necesitas es un button
para activar la ventana emergente y un elemento para activar.
- Primero, establece un atributo
popover
en el elemento que será el elemento emergente. - Luego, agrega un
id
único en el elemento de la ventana emergente. - Por último, para conectar el botón a la ventana emergente, configura el
popovertarget
del botón con el valor delid
del elemento emergente.
Este proceso se muestra en el siguiente código:
<button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>
<p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>
Para tener un control más detallado sobre la ventana emergente, puedes configurar explícitamente los tipos de estas. Por ejemplo, usar un atributo popover
vacío sin valor equivale a popover="auto"
. El valor de auto
habilita el comportamiento de descartar luz y cierra automáticamente otras ventanas emergentes. Utiliza popover="manual"
y deberás agregar un botón de cierre. Las ventanas emergentes manuales no cierran otras ventanas emergentes ni permiten que los usuarios descarte la ventana emergente haciendo clic fuera de ella en la IU. Puedes crear una ventana emergente manual de la siguiente manera:
<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>
<div id="my-popover" popover=manual>
<p>I am a popover with more information. Hit the close button or toggle to close me.<p>
<button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Close</span>
</button>
</div>
Ventana emergente frente a diálogo modal
Es posible que te preguntes si necesitas la ventana emergente cuando existe un diálogo y la respuesta es: tal vez no.
Es importante tener en cuenta que el atributo de ventana emergente no proporciona semántica por sí solo. Si bien ahora puedes crear experiencias similares a las de diálogos modales con ventanas emergentes, existen algunas diferencias clave entre ambos:
El elemento modal <dialog>
- Se abrió con
dialog.showModal()
. - Se cerró con
dialog.close()
. - Inerte el resto de la página.
- No es compatible con el comportamiento para descartar la luz.
- Puedes definir el estilo del estado abierto con el atributo
[open]
. - Semánticamente representa un componente interactivo que bloquea la interacción con el resto de la página.
El atributo [popover]
- Se puede abrir con un invocador declarativo (
popovertarget
). - Cerrado con
popovertarget
(ventana emergente automática) opopovertargetaction=hide
(ventana emergente manual). - No inerte el resto de la página.
- Admite el comportamiento de descartar luz.
- Puedes definir el diseño del estado abierto con la seudoclase
:popover-open
. - No hay semántica inherente.
Conclusión y lecturas adicionales
popover
ofrece muchas funciones emocionantes a la plataforma. Para obtener más información sobre esta API, incluidos más detalles sobre la accesibilidad de la función y documentación sobre el conjunto de funciones, consulta esta lectura recomendada para obtener más información: