<dialog>
  <form>
    <p>
      <label>
        Digite seu nome:
        <input type="text" id="name" />
      </label>
    </p>
    <div>
      <button value="cancel" formmethod="dialog">Cancelar</button>
      <button id="confirm">Continuar</button>
    </div>
  </form>
</dialog>
<p>
  <button id="show">Abrir diálogo</button>
</p>
<output></output>

const dialog = document.querySelector('dialog')
const confirm = document.querySelector('#confirm')
const show = document.querySelector('#show')
const output = document.querySelector('output')
const input = document.querySelector('#name')

// Abre o modal ao clicar no botão "Abrir diálogo"
show.addEventListener('click', () => {
  dialog.showModal()
})

// Ao fechar o diálogo, exibe o valor digitado no formulário
dialog.addEventListener('close', (e) => {
  output.value =
    ['default', 'cancel'].includes(dialog.returnValue)
      ? 'O nome é obrigatório'
      : `Seu nome é: ${dialog.returnValue}`
})

confirm.addEventListener('click', (e) => {
  // Previne o comportamento padrão de enviar o formulário
  e.preventDefault()
  // Enviar o valor do input ao fechar o dialog
  dialog.close(input.value)
})