Caramba, eu não sabia que podia já mapear o dialog no onclick kkkk. Eu faria de · Kevaosz

Em resposta a Elemento HTML <dialog>

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

deMenezes

2 anos atrás

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();