Diálogos permitem que você exiba informações ou ações importantes para os usuários. Com o elemento dialog embutido do HTML, você pode criar facilmente esses diálogos (tanto modais quanto não modais) em suas aplicações web. Uma caixa de diálogo modal é um tipo de diálogo que obriga o usuário a interagir com ela antes que possa acessar o restante da aplicação ou página da web. Ele bloqueia efetivamente a interação com outros conteúdos até que o usuário complete uma ação, como fechar o diálogo ou enviar um formulário. Em contraste, um diálogo não modal permite que o usuário continue interagindo com outras partes da página ou aplicação mesmo quando o diálogo está aberto. Isso não impede o acesso ao restante do conteúdo. Nesta lição, você aprenderá como abrir e fechar modais usando os métodos showModal() e close(). Quando você quer garantir que o usuário foque em uma ação ou mensagem específica de um modal, você pode abrir a caixa de diálogo modal usando o método showModal(). Isso adicionará um fundo para os outros itens na página e os desativará. Isto é ideal para modais que exibem formulários, confirmações e informações críticas que requerem ação do usuário.  Aqui está o HTML para o modal dialog:

<dialog id="my-modal">
  <p>This is a modal dialog.</p>
</dialog>

Por enquanto, você não pode ver nada na página porque o modal está fechado na renderização inicial. Você pode abrir o modal automaticamente usando o método showModal():

<dialog id="modal">
  <p>This is a modal dialog.</p>
</dialog>
<script src="index.js"></script>

const dialog = document.getElementById("modal");
dialog.showModal();

O resultado no navegador mostrará um modal com o texto This is a modal dialog. É melhor dar o controle ao usuário. Para conseguir isso, você pode adicionar um listener de evento de clique a um botão e usar o método showModal():

<dialog id="modal">
  <p>This is a modal dialog.</p>
</dialog>
<button id="open-modal-btn">Open Modal Dialog</button>
<script src="index.js"></script>

const dialog = document.getElementById("modal");
const openButton = document.getElementById("open-modal-btn");

openButton.addEventListener("click", () => {
  dialog.showModal();
});

Se você precisar mostrar um diálogo enquanto ainda permite a interação com o conteúdo fora do diálogo, então você pode usar o método show():

<dialog id="modal">
  <p>This is a modal dialog.</p>
</dialog>
<button id="open-modal-btn">Open Modal Dialog</button>
<script src="index.js"></script>

const dialog = document.getElementById("modal");
const openButton = document.getElementById("open-modal-btn");

openButton.addEventListener("click", () => {
  dialog.show();
});

Para fechar um modal, você pode adicionar um botão ao modal dentro do elemento dialog e usar o método close():

<dialog id="modal">
  <p>This is a modal dialog.</p>
  <button id="close-modal-btn">Close Modal</button>
</dialog>
<button id="open-modal-btn">Open Modal Dialog</button>
<script src="index.js"></script>

const dialog = document.getElementById("modal");
const openButton = document.getElementById("open-modal-btn");
const closeButton = document.getElementById("close-modal-btn");

openButton.addEventListener("click", () => {
  dialog.show();
});

closeButton.addEventListener("click", () => {
  dialog.close();
});