Carregando...

Html dialog

Postado: 30 de junho de 2022

Html dialog

A tag html <dialog> é um dos elementos HTML5. Ele é usado para criar uma caixa de diálogo nativa, com a qual o usuário interage e executa determinadas ações. Por exemplo, você pode criar mensagens ou formulários pop-up com esse elemento. A caixa de diálogo fica oculta por padrão. É ativado pelo atributo open.

Para exibir/ocultar o conteúdo, precisamos da API Javascript.

Veja o exemplo no código abaixo.

<dialog open>Esta é uma janela de diálogo aberta</dialog>

Veja o código completo com o script

<!DOCTYPE html>
<html>
  <head>
    
    <title>Dialog</title>
    
    <style>
      dialog { width:50%; }
    </style>

  </head>
  <body>
    
    <div>
      <dialog id="DialogBox">
        <p>
          Escreva seu texto aqui.
        </p>
        <button id="hide">Fechar</button>
      </dialog>
      <button id="show">Texto do dialog modal</button>
    </div>

    <script type="text/JavaScript">
      (function() { 
        var dialog = document.getElementById('DialogBox'); 
        document.getElementById('show').onclick = function() { dialog.show(); }; 
        document.getElementById('hide').onclick = function() { dialog.close(); }; 
      })();
    </script>

  </body>
</html>

Definição e uso html dialog

A tag html <dialog> define uma caixa de diálogo ou sub janela.

O elemento <dialog> facilita a criação de diálogos pop-up e modais em uma página da web.

Publicado por: Loop Nerd

693 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados