Criar dialog com HTML nativo

292d 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>

Adicionamos um botão que vai abrir nosso diálogo ao ser clicado. E um botão interno do dialog que fechará o mesmo.

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.

Referências

<dialog>: O elemento Dialog - HTML: Linguagem de Marcação de Hipertexto | MDN

Comentários (0)