Diálogos en HTML

Un modal nativo: el método del formulario lo cierra y devuelve un valor.

<dialog id="confirm-reset">
  <form method="dialog">
    <h2>Reset this tour?</h2>
    <p>Your stars for the Python basics tour will be cleared.</p>
    <button value="cancel">Keep them</button>
    <button value="reset" autofocus>Reset</button>
  </form>
</dialog>
<button type="button" id="open-reset">Reset progress</button>

Cómo funciona

1. showModal() lo abre y atrapa el foco adentro.
2. method=dialog cierra el diálogo y reporta el valor del botón.
3. El fondo se estila con ::backdrop.

El intento, en números

Líneas

9

Caracteres a escribir

307

Tokens

73

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 58 segundos.

Escribe este fragmento

Paso 3 de 4 en Desplegables y diálogos; paso 3 de 13 en HTML interactivo.

← Anterior Siguiente →