<dialog open>

  <p>Greetings, one and all!</p>

  <form method="dialog">

    <button>OK</button>

  </form>

</dialog>

<button onclick="my_dialog.showModal()">Open Dialog</button>

​

<dialog id="my_dialog">

    <h1>This is my dialog window</h1>

    <button onclick="my_dialog.close()">Close Dialog</button>

</dialog>

<dialog>

  <p>Are you sure?</p>

  <button class="dialogButton">Yes</button>

  <button class="dialogButton">No</button>

</dialog>

​

// javascsript:

const form1 = document.querySelector('form')

const dialogButton = document.querySelectorAll('.dialogButton')

  // show dialog instead of submiting form:

  form1.addEventListener('submit', (ev) => {

    ev.preventDefault()

    dialog.showModal()

  })

  // submit form only when user click Yes:

  dialogButton.forEach((element, key, parent) => {

    element.addEventListener('click', (ev2) => {

      dialog.close()

      if(element.innerHTML === 'Yes') form1.submit()

    })

  })

<button onclick="alert('dialog')"> Popup </button>