Executando verificação de segurança...
8
KG1122
2 min de leitura ·

Elemento HTML <dialog>

Olá a todos!
Existe um elemento que eu acho muito interessante e simples no HTML chamado <dialog>. Este elemento representa uma caixa de diálogo ou janela que pode ser usada para criar pop-ups modais, alertas e outros tipos de interações com o usuário, porém ele não parece ser muito popular na maioria dos projetos ou sequer conhecido.
Para mostrar ou esconder o elemento <dialog>, você pode usar os métodos showModal() (ou simplesmente show(), tendo esse um comportamento diferente do anterior) e close() do elemento. Por exemplo, para mostrar uma caixa de diálogo quando o usuário clica em um botão, você pode usar o seguinte código:

<dialog id="dialog-box">
  <!-- Conteúdo da caixa de diálogo -->
  <button onclick="document.getElementById('dialog-box').close()">Close</button>
</dialog>
<button onclick="document.getElementById('dialog-box').showModal()">Show</button>

Esse elemento tem uma interação nativa muito interessante com o elemento <form>, escurece o restante da página automaticamente (de forma personalizável com o pseudo-elemento ::backdrop), fecha quando a tecla ESC é pressionada e por ser um elemento de top layer, ele impede a navegação no restante da página com a tecla TAB permitindo-a somente nos elementos dentro do dialog.
Claro, ele não é perfeito. O suporte dele em navegadores como o Safari é bem recente (a partir da versão 15.4, de 2022) e no Firefox é necessário habilitar a opção dom.dialog_element.enabled em about:config , o que torna o uso de polyfills quase obrigatório para usá-lo. Além disso, ele não fecha automaticamente ao clicar fora do elemento no modo modal, mas em comparação à sua simplicidade de uso, ele é um elemento que vale a pena conhecer.

Carregando publicação patrocinada...
1
blmayer

É sempre bom ver os desenvolvedores usando os elementos nativos do HTML corretamente, ao invés de escrever javascript pra tudo. Continue assim. Infelizmente isso não parece ser tão valorizado na comunidade.

1
KaioPiola

Cara, se eu soubesse disso antes eu nunca precisaria ter tido tanta dor de cabeça implementando modais do bootstrap ou personalizados via JS.
Muitíssimo obrigado por compartilhar isso, realmente vai me ajudar demais mesmo daqui pra frente cara!
Uma mão na roda.
Vou tomar um tempinho livre pra dar uma lida na documentação completa do HTML algum dia, deve ter bastante coisa oculta nele que nem imaginamos que exista e serviria muito bem pra resolver problemas como este.

1
1
Kevaosz

Caramba, eu não sabia que podia já mapear o dialog no onclick kkkk.
Eu faria de um jeito mais 'trabalhoso':

HTML:

<dialog id="dialog-box">
    <!-- Contéudo da caixa de dialog -->
    <button onclick="closeModal()">Close</button>
</dialog>
<button onclick="showModal()">Show</button>
<script src="script.js"></script>

JavaScript:

const dialog = document.getElementById('dialog-box');

function showModal() {
  dialog.showModal()
}

function closeModal() {
  dialog.close()
}

Como eu disse, mais 'trabalhoso'.

1
deMenezes

Opa, belza?

Apesar de parecer mais "trabalhoso", eu prefiro dessa forma como vc fez, chamando o script.js na página.

Inclusive adicionando os eventos por lá, em vez de usar o atributo onclick="" dentro do HTML.

Prefiro assim pois separa melhor as responsabilidades:

  • HTML: coloca as coisas na tela
  • Javascript: cria os comportamentos

No caso:

<dialog id="dialog-box">
    <!-- Contéudo da caixa de dialog -->
    <button class="close-button">Close</button>
</dialog>
<button class="show-button">Show</button>
<script src="script.js"></script>

const dialog = document.getElementById('dialog-box');
const closeButton = document.querySelector('.close-button');
const showButton = document.querySelector('.show-button');

closeButton.onclick = () => dialog.close();
showButton.onclick = () => dialog.showModal();
1
1