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.htmle 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.
