Se usó la API de Cloud Translation para traducir esta página.

Casos de éxito de ventanas emergentes

Swetha Gopalakrishnan

Saurabh Rajpal

Las ventanas emergentes están en todas partes de la Web. Puedes verlas en menús, puntas de activación y diálogos, que se usan para funciones como la configuración de la cuenta, los widgets de divulgación y vistas previas de tarjetas de productos. A pesar de la prevalencia de estos componentes, crearlos en navegadores sigue siendo sorprendentemente engorroso. Para resolver esto, un nuevo conjunto de Las API declarativas de HTML para crear ventanas emergentes llegarán a los navegadores, el primero de que son la API de Popover.

La ventana emergente forma parte de Baseline Newly Disponible.

Navegadores compatibles

Origen

Por lo general, una ventana emergente se confunde con un diálogo. Sin embargo, hay algunas claves diferencias en su comportamiento. Un elemento dialog abierto con dialog.showModal (diálogo modal), es una experiencia que requiere la interacción explícita del usuario para cierra la ventana modal. Un popover admite el descarte de luz. Una dialog modal no lo hace. Un diálogo modal inerte el resto de la página. Un popover no lo hace. Obtén más información sobre las diferencias.

Este artículo es parte de una serie en la que se analiza cómo las empresas de comercio electrónico mejoró su sitio web con nuevas funciones de CSS y de IU. En este artículo, descubrirás cómo Tokopedia implementó y se benefició de la API de Popover.

Tokopedia

El uso de atributos emergentes redujo hasta un 70% las líneas de código en React. La ventana modal se pueden controlar de forma nativa con HTML, en lugar de requerir administración de eventos en JavaScript y usar React.createPortal para mover el DOM modal al final de document.body También podemos usar @starting-style para animar el apertura y cierre del anuncio emergente.—Andy Wihalim, software sénior Ingeniero, Tokopedia.

Las páginas de detalles del producto (PDP) de Tokopedia contienen varias imágenes de cada producto. producto. Cuando se hace clic en la miniatura del producto, se abre un modal para mostrar el imagen ampliada. Este es un patrón común que se usa en los sitios web de comercio electrónico.

Código

Tokopedia usa React para el desarrollo de su frontend. Antes de implementar el API de ventana emergente para esta ventana modal, usaron una ventana modal del DOM y un botón. El botón cambió el estado de React para abrir la ventana modal. Con la API de ventana emergente, especifica un El atributo popovertarget en el elemento que abre la ventana emergente con un valor que sea igual al ID del elemento emergente.

Con esta implementación básica, el popover funciona, pero aparece y desaparece sin ninguna animación. Para crear una animación de entrada y salida fluida para la ventana emergente, usa :popover-open y @starting-style, y permite la animación de propiedades discretas. En el siguiente ejemplo de código, la ventana emergente se escala de forma vertical y horizontal con el uso del transform: 'scale()'.

Este ejemplo de código muestra Cómo implementar animaciones de entrada y salida para la API de ventana emergente

<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />

export const cssModalWrapper = css({
  background: NN0,
  border: 'none',
  borderRadius: '.625rem',
  width: 1024,
  padding: 24,

  '&::backdrop': {
    opacity: 0,
    transitionProperty: 'opacity, display',
    transition: '.25s ease-out',
    transitionBehavior: 'allow-discrete',
  },

  transitionProperty: 'transform, opacity, display',
  transition: '.25s ease-out',
  transitionBehavior: 'allow-discrete',

  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },
  transform: 'scale(0.8)',
  opacity: 0,

  '&:popover-open': {
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
    transform: 'scale(1)',
    opacity: 1,
  },
});

Para satisfacer las necesidades de los navegadores que no son compatibles con la API de popover, Tokopedia implementó el popover-polyfill de Oddbird, que es de solo 3.2 KB con compresión gzip. Estaban conformes con el polyfill ya que funcionó bien y no generó regresiones de rendimiento. En general, fueron reducir hasta un 70% las líneas de código en React con la API de ventana emergente.

Tokopedia usa React, y el equipo logró dividir el código desactivando los componentes el componente de ventana emergente para las páginas que no lo usan. el contenido de las ventanas emergentes. De esta manera, redujeron el tamaño de la solicitud inicial.

Considera combinar las ventanas emergentes con el posicionamiento de anclaje de CSS (próximamente en Chrome) para posicionarlos en relación con otros elementos. Esto es útil, por ejemplo, para cuadros de información y menús.

Recursos

Presentación de la API de ventana emergente
La diferencia entre una ventana emergente y un diálogo
¿Quieres informar un error o solicitar una función nueva? Queremos conocer tu opinión.

Explora los otros artículos de esta serie sobre cómo el comercio electrónico empresas se beneficiaron con el uso de nuevas funciones de CSS y de IU, como las basadas en desplazamientos animaciones, ventanas emergentes, consultas de contenedores y el selector has().