dialog | Html

Descripción

El elemento dialog representa una caja de dialogo u otro componente con el que se pueda interactuar.

El elemento dialog puede ser utilizado de forma independiente o puede ser integrado para mostrar un formulario. En este segundo caso el formulario debería de indicar en su atributo method el valor “dialog”.

Sintaxis

<dialog open></dialog>

Atributos

open

Atributos Globales

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ventana de Dialogo en HTML5</title>
</head>
<body>

  <h1>Ventana de Dialogo en HTML5</h1>

  <dialog id="dialogo">
    <p>¿Te gusta este ejemplo?</p>
    <menu>
      <button id="cancel" type="button">Cancel</button>
      <button id="ok" type="button">OK</button>
    </menu>
  </dialog>

  <button id="mostrar">Mostrar la Ventana</button>

  <script>
    
    var boton = document.getElementById("mostrar");    
    var dialogo = document.getElementById("dialogo");
    var botonCancelar = document.getElementById("cancel");
    var botonOK = document.getElementById("ok");

    boton.addEventListener("click", function(){        
        dialogo.showModal();
    });
    
    botonCancelar.addEventListener('click', function() {
        dialogo.close();
    });

    botonOK.addEventListener('click', function() {
        dialogo.close();
    });

  </script>
    
</body>
</html>

Artículos

Formulario en ventana dialogo con HTML5

Manual HTML

Aprende más sobre HTML consultando online o descargando nuestro manual.

Test HTML

¿Te atreves a probar tus habilidades y conocimiento en HTML con nuestro test?

Vídeos HTML

Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.