Criar Janelas Modais com a Tag Dialog HTML

Introdução

Neste laboratório, você aprenderá como usar a tag HTML <dialog> para criar uma janela modal ou um pop-up em uma página web. Vamos guiá-lo através do processo passo a passo de criação de uma caixa de diálogo de exemplo com a ajuda da tag <dialog>.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Adicionando a tag dialog em index.html

A tag <dialog> requer uma tag de abertura e uma tag de fechamento. Nesta etapa, adicionaremos a estrutura HTML básica e a tag <dialog> ao arquivo index.html.

<!doctype html>
<html>
  <head>
    <title>Janela Modal usando a tag dialog HTML</title>
  </head>
  <body>
    <h1>Janela Modal usando a tag dialog HTML</h1>

    <!-- Adicionando a tag dialog -->
    <dialog>
      <p>Esta é uma caixa de diálogo de exemplo!</p>
    </dialog>
  </body>
</html>

Adicionando um botão para abrir o diálogo

Nesta etapa, criaremos um botão para abrir a caixa de diálogo. Usaremos JavaScript para abrir e fechar a caixa de diálogo quando o botão for clicado.

<!doctype html>
<html>
  <head>
    <title>Janela Modal usando a tag dialog HTML</title>
  </head>
  <body>
    <h1>Janela Modal usando a tag dialog HTML</h1>

    <!-- Adicionando a tag dialog -->
    <dialog id="dialog">
      <p>Esta é uma caixa de diálogo de exemplo!</p>
    </dialog>

    <!-- Adicionando um botão para abrir a caixa de diálogo -->
    <button onclick="document.getElementById('dialog').showModal()">
      Abrir Diálogo
    </button>

    <!-- Adicionando um botão para fechar a caixa de diálogo, que está oculto por padrão -->
    <button onclick="document.getElementById('dialog').close()">
      Fechar Diálogo
    </button>
  </body>
</html>

Adicionando estilos CSS ao diálogo

Nesta etapa, adicionaremos algum estilo CSS à caixa de diálogo, tornando-a mais apresentável.

<!doctype html>
<html>
  <head>
    <title>Janela Modal usando a tag dialog HTML</title>

    <!-- Adicionando estilos para a caixa de diálogo -->
    <style>
      dialog {
        width: 300px;
        height: 150px;
        background-color: #f2f2f2;
        padding: 20px;
        border: 2px solid #000;
        border-radius: 10px;
        box-shadow: 0px 0px 10px #000;
        font-family: Arial, san-serif;
        font-size: 18px;
        color: #000;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Janela Modal usando a tag dialog HTML</h1>

    <!-- Adicionando a tag dialog -->
    <dialog id="dialog">
      <p>Esta é uma caixa de diálogo de exemplo!</p>
    </dialog>

    <!-- Adicionando um botão para abrir a caixa de diálogo -->
    <button onclick="document.getElementById('dialog').showModal()">
      Abrir Diálogo
    </button>

    <!-- Adicionando um botão para fechar a caixa de diálogo, que está oculto por padrão -->
    <button onclick="document.getElementById('dialog').close()">
      Fechar Diálogo
    </button>
  </body>
</html>

Agora, nosso código HTML está completo para criar uma janela modal usando a tag dialog HTML.

Resumo

Você concluiu com sucesso o laboratório sobre a criação de uma janela modal usando a tag HTML dialog. Neste laboratório, discutimos passo a passo o processo de criação de uma caixa de diálogo de exemplo usando a tag HTML <dialog>. Adicionamos um botão simples para abrir e fechar a caixa de diálogo com a ajuda de JavaScript. Além disso, também adicionamos algum estilo CSS básico para melhorar a aparência da caixa de diálogo.

Caixa/Janela de Diálogo HTML

Introdução

Adicionando a tag dialog em index.html

Adicionando um botão para abrir o diálogo

Adicionando estilos CSS ao diálogo

Resumo