Estaba leyendo algunos blogs de noticias tecnológicas y me topé con el título Popover API aterriza en Baseline. Estaba confundido, durante mi reciente inmersión en el desarrollo front-end, recientemente me costó mucho acostumbrarme a usar Elementos en HTML. Mientras revisaba el blog, estaba constantemente confundido sobre cómo estaba usando el elemento hasta ahora.

TL;DR

Elija para:

• Ventanas emergentes modales que requieren atención del usuario
• Accesibilidad e interacción con el teclado

Elija ventana emergente para:

• Ventanas emergentes no modales con despido ligero
• Fácil implementación con código mínimo

elemento

Según el MDN El elemento Diálogo

El elemento HTML representa un cuadro de diálogo modal o no modal u otro componente interactivo, como una alerta, un inspector o una subventana descartables.

A generalmente se utiliza y se muestra sobre el contenido cuando el sitio web necesita llamar la atención del usuario sobre algo importante. es decir, suscribirse a un boletín informativo, solicitar (más bien obligar) a desactivar el bloqueador de anuncios o aceptar términos y condiciones.

elemento

como modal

Como te habrás encontrado varias veces en varios sitios web, algunas de estas ventanas emergentes se dibujarán en toda la pantalla mientras se difumina el fondo o se desactiva el fondo y se enfoca al usuario solo en la tarea en cuestión; el usuario debe descartar (solo si está permitido) la ventana emergente o ingrese la información requerida para que desaparezca. Este comportamiento se denomina "elemento como modal". Estos elementos modales se muestran en la capa superior de la página.

//To open dialog as a modal.

dialog.showModal();

// To close the dialog.

dialog.close();

cuando se muestra usando el método showModal() se puede descartar usando la tecla esc. Los usuarios del teclado esperan este comportamiento, que debe mantenerse y que proporciona el navegador. Si hay varios cuadros de diálogo modales abiertos, solo se cerrará el último cuadro de diálogo usando la tecla esc.

elemento como no modal

Es posible que no siempre desees detener el flujo natural de uso de tu página web por parte del usuario, dejar de hacer todo lo demás y concentrarte en lo que deseas mostrar pero aún así en tu contenido, como una notificación de brindis, un consentimiento de cookies o información sobre herramientas general. información. debe aparecer en la capa superior de la página, encima de cualquier otro contenido con el que el usuario pueda o no interactuar. Este tipo de ventanas emergentes se denominan ventanas emergentes no modales. Los usuarios pueden descartarlos manualmente o en general y desaparecerán por sí solos. Estos cuadros de diálogo no modales todavía se muestran en la capa superior de la página, pero su prioridad se puede controlar usando el índice z y el elemento modal tomará un índice z más alto que este y hará que no sea accesible.

//To open dialog as a modal.

dialog.show();

// To close the dialog.

dialog.close();

Ejemplo de código

Algunas cuestiones

Me costó entender el funcionamiento y el uso de elementos no modales. En mi opinión, el elemento no modal se comportó de manera inconsistente y necesitaba código Javascript para manejar situaciones como:

• No hay ninguna función de despido ligero. Al hacer clic fuera del modelo no se cerrará el .
• La tecla esc no descarta y necesita Javascript para manejar ese escenario.
• es necesario administrar el índice z manualmente si desea dibujar la capa superior.

Para mi sorpresa, la API emergente respondió o solucionó estos problemas y más....

API emergente

popover son atributos que se pueden agregar a cualquier atributo HTML. Aquí tienes un ejemplo.

Toggle the popover
Popover content

Diferencia principal entre elemento popover y

La principal diferencia entre los elementos popover y