4.1 Elemento <dialog>
No HTML5 também apareceu o elemento <dialog>, criado para fazer caixas de diálogo e janelas modais em páginas web. Esse elemento permite criar janelas pop-up de forma simples e semanticamente correta para vários fins, como notificações, confirmações, formulários de entrada e muito mais. A seguir vamos ver como usar o <dialog>, seus atributos e métodos, além de alguns exemplos de uso.
O elemento <dialog> representa uma caixa de diálogo ou outra janela interativa. Ela pode ser modal ou não modal. Dentro do elemento <dialog> você pode colocar qualquer conteúdo HTML: texto, formulários, botões etc.
Sintaxe:
<dialog>
<!-- Conteúdo da caixa de diálogo -->
</dialog>
<div style="min-height: 200px;">
<dialog id="favSuperHeroDialog">
<form method="dialog">
<div>
<label for="favSuperHero">Super-herói favorito:</label>
<select id="favSuperHero" name="favSuperHero">
<option></option>
<option>Capitão América</option>
<option>Homem de Ferro</option>
<option>Hulk</option>
</select>
</div>
<div>
<button type="reset" id="cancel">Redefinir</button>
<button type="submit">Confirmar</button>
</div>
</form>
</dialog>
<button id="updateDetails">Abrir caixa de diálogo</button>
</div>
<dialog id="favSuperHeroDialog">
<form method="dialog">
<div>
<label for="favSuperHero">Super-herói favorito:</label>
<select id="favSuperHero" name="favSuperHero">
<option></option>
<option>Capitão América</option>
<option>Homem de Ferro</option>
<option>Hulk</option>
</select>
</div>
<div>
<button type="reset" id="cancel">Redefinir</button>
<button type="submit">Confirmar</button>
</div>
</form>
</dialog>
<button id="updateDetails">Abrir caixa de diálogo</button>
// Pegamos os botões e o diálogo do DOM
const updateButton = document.getElementById("updateDetails");
const cancelButton = document.getElementById("cancel");
const dialog = document.getElementById("favSuperHeroDialog");
// Função que verifica o estado do diálogo (aberto/fechado)
function openCheck(dialog) {
if (dialog.open) {
console.log("Diálogo iniciado");
} else {
console.log("Diálogo encerrado");
}
}
// Abrimos o diálogo ao clicar no botão Update
updateButton.addEventListener("click", () => {
dialog.showModal();
openCheck(dialog);
});
// Fechamos o diálogo ao clicar no botão Cancel
cancelButton.addEventListener("click", () => {
dialog.close();
openCheck(dialog);
});
4.2 Atributos e métodos do <dialog>
O atributo open define se a caixa de diálogo está aberta. Se esse atributo estiver presente, o diálogo aparece na página.
Exemplo de uso do atributo open:
<dialog open>
<p>Esta é uma caixa de diálogo aberta.</p>
</dialog>
Uma janela exibida pelo atributo open é sempre não modal. A janela modal é aberta pelo método showModal() (falamos dele mais abaixo).
A propriedade returnValue guarda uma string com o resultado: o valor com que a janela foi fechada. É uma propriedade do objeto JavaScript do diálogo, não um atributo HTML, por isso ela não é escrita na marcação. O valor é definido pelo método close('valor') ou por um botão de formulário com method="dialog" — nesse caso, o returnValue recebe o value do botão clicado. Se a janela foi fechada com a tecla Esc, o returnValue não muda.
dialog.close('confirm');
console.log(dialog.returnValue); // "confirm"
Método show():
Abre a caixa de diálogo no modo não modal.
dialog.show();
Método showModal():
Abre a caixa de diálogo no modo modal, bloqueando a interação com o resto da página.
dialog.showModal();
Método close():
Fecha a caixa de diálogo.
dialog.close();
Como “ligar” um método a um botão: o mínimo de JavaScript
O atributo open mostra a janela logo que a página carrega. Para a janela abrir e fechar por um botão, nesta aula chamamos os métodos show(), showModal() e close() a partir do JavaScript — são exatamente eles que você vai usar nas tarefas. A linguagem vem com detalhes mais adiante; por enquanto basta este modelo:
<button id="btn-open">Mostrar dica</button>
<dialog id="info-dialog">
<p>Texto da janela</p>
<button id="btn-close">Entendi</button>
</dialog>
<script>
// 1. Encontramos os elementos da página pelo id
const openBtn = document.getElementById('btn-open');
const closeBtn = document.getElementById('btn-close');
const infoDialog = document.getElementById('info-dialog');
// 2. “Quando clicarem no botão, execute o código entre chaves”
openBtn.addEventListener('click', () => {
infoDialog.showModal(); // abrir no modo modal
});
closeBtn.addEventListener('click', () => {
infoDialog.close(); // fechar
});
</script>
- Colocamos o
<script>no fim do<body>: o navegador executa o script assim que chega nele, e os elementos abaixo do script ainda não existem — ogetElementByIdretornarianull. document.getElementById('…')— “me dá o elemento com este id”.elemento.addEventListener('click', () => { … })— “quando clicarem no elemento, execute o código entre chaves”. A escrita() => { … }é uma função curta: código que vai rodar depois, no clique.- Para uma janela não modal, chame
show()em vez deshowModal().
4.3 Eventos do <dialog>
Evento close:
Evento que acontece quando a caixa de diálogo é fechada.
<div style="min-height: 200px">
<dialog id="myDialog">
<form method="dialog">
<p>Clique no botão "Cancelar" ou "OK" para retornar um valor</p>
<div class="dialog-buttons">
<button value="cancel">Cancelar</button>
<button value="confirm">OK</button>
</div>
</form>
</dialog>
<button id="showDialog">Mostrar caixa de diálogo</button>
</div>
<dialog id="myDialog">
<form method="dialog">
<p>Clique no botão "Cancelar" ou "OK" para retornar um valor</p>
<div class="dialog-buttons">
<button value="cancel">Cancelar</button>
<button value="confirm">OK</button>
</div>
</form>
</dialog>
<button id="showDialog">Mostrar caixa de diálogo</button>
// Pegamos os elementos do DOM
const dialog = document.getElementById('myDialog');
const showDialogButton = document.getElementById('showDialog');
// Abertura da janela modal
showDialogButton.addEventListener('click', () => {
dialog.showModal();
});
// Ao fechar, mostramos o returnValue
dialog.addEventListener('close', () => {
alert(`Diálogo fechado com o valor de retorno: ${dialog.returnValue}`);
});
Evento cancel:
Evento que acontece quando a caixa de diálogo é cancelada (por exemplo, ao pressionar a tecla Esc).
<div style="min-height: 200px">
<dialog id="myDialog">
<form method="dialog">
<p>Pressione a tecla "Esc" para ver o resultado</p>
</form>
</dialog>
<button id="showDialog">Abrir caixa de diálogo</button>
</div>
<dialog id="myDialog">
<form method="dialog">
<p>Pressione a tecla "Esc" para ver o resultado</p>
</form>
</dialog>
<button id="showDialog">Abrir caixa de diálogo</button>
// Pegamos os elementos do DOM
const dialog = document.getElementById('myDialog');
const showDialogButton = document.getElementById('showDialog');
// Abertura do diálogo
showDialogButton.addEventListener("click", () => {
dialog.showModal();
});
// Tratamento do cancelamento do diálogo (tecla Esc)
dialog.addEventListener('cancel', () => {
alert('Dialog was cancelled');
});
GO TO FULL VERSION