<dialog>
  <form>
    <p>
      <label>
        Type your name:
        <input type="text" id="name" />
      </label>
    </p>
    <div>
      <button value="cancel" formmethod="dialog">Cancel</button>
      <button id="confirm">Continue</button>
    </div>
  </form>
</dialog>
<p>
  <button id="show">Open dialog</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')

show.addEventListener('click', () => {
  dialog.showModal()
})

dialog.addEventListener('close', (e) => {
  output.value =
    ['default', 'cancel'].includes(dialog.returnValue)
      ? 'The name is required'
      : `Your name is: ${dialog.returnValue}`
})

confirm.addEventListener('click', (e) => {
  e.preventDefault()
  dialog.close(input.value)
})