BaselineLab
0

Playground de Popover API

Crea contenido no modal en la capa superior con el atributo popover. Compara controles declarativos y JavaScript, prueba el cierre ligero y copia HTML, CSS y JS reutilizable.

Preguntar a la IA

Playground de Popover API

Respuesta generada con openai/gpt-5.4-nano. La IA puede cometer errores. Revisa siempre el resultado.
HTML
<button type="button" popovertarget="feature-popover" popovertargetaction="toggle">
  Abrir popover
</button>

<div
  class="popover-card"
  id="feature-popover"
  popover
>
  <h2>Panel de acciones</h2>
  <p>Este contenido vive en la capa superior sin crear un modal.</p>
  <button type="button" popovertarget="feature-popover" popovertargetaction="hide">
    Cerrar
  </button>
</div>
CSS
.popover-card {
  max-inline-size: min(24rem, calc(100vw - 2rem));
  padding: 1.25rem;
  border: 1px solid light-dark(#b8c3ee, #496096);
  border-radius: 1rem;
  background: light-dark(#fffdf7, #10182c);
  color: light-dark(#17203a, #f4f7ff);
  box-shadow: 0 1.25rem 3rem rgb(8 15 35 / 0.28);
  opacity: 0;
  transform: translateY(0.5rem) scale(0.98);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    display 180ms allow-discrete,
    overlay 180ms allow-discrete;
}

.popover-card:popover-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@starting-style {
  .popover-card:popover-open {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .popover-card {
    transition: none;
  }
}

.popover-card::backdrop {
  background: rgb(8 15 35 / 0.28);
  backdrop-filter: blur(3px);
}
JS