Criar dialog com HTML nativo
243d atrás
Atualmente, o #HTML tem um elemento nativo para criação de caixas de diálogo, sua sintaxe básica, com o diálogo já aberto e com um pequeno texto interno, seria assim:
<dialog open>Hello World!</dialog>
Com o mínimo de #JavaScript é possível controlar a abertura e fechamento do dialog. Primeiro vamos fazer algumas pequenas alterações no HTML:
<button id="dialog-show-modal">Open dialog</button>
<dialog id="dialog">
<h2>Dialog title</h2>
<p>Dialog text</p>
<button id="dialog-close">Close</button>
</dialog>
E aqui está o JavaScript necessário para isso:
const
dialog = document.getElementById('dialog'),
dialogShowModal = document.getElementById('dialog-show-modal'),
dialogClose = document.getElementById('dialog-close');
dialogShowModal.onclick = () => dialog.showModal();
dialogClose.onclick = () => dialog.close();
O resultado será algo parecido com isso:
Referências
Mais informações sobre o elemento <dialog> podem ser encontradas aqui:
<dialog>: O elemento Dialog - HTML: Linguagem de Marcação de Hipertexto | MDN
O elemento HTML <dialog> representa uma caixa de diálogo ou outro componente interativo, tal como um inspetor ou janela.
Comentários (0)