<button  id="btn1">Show me content in a dialog</button>

<dialog>
  <form method="dialog">
    <button>close</button>
  </form>
  
  Content in a dialog
</dialog>

<script>
  document.querySelector('#btn1').addEventListener('click', e => {
    document.querySelector('#btn1').nextElementSibling.show()
  })
</script>

<button id="btn2">Show me content in a modal dialog</button>

<dialog closedby="any">
  <form method="dialog">
    <button class="close">close</button>
  </form>
  
  Content in a dialog
</dialog>

<script>
  document.querySelector('#btn2').addEventListener('click', e => {
    document.querySelector('#btn2').nextElementSibling.showModal()
  })
</script>

<button id="btn3">Show me content in a modal dialog</button>

<dialog closedby="any">
  <form method="dialog">
    <button class="close">close</button>
  </form>
  
  Content in a dialog. Click outside in some browsers to close.
</dialog>

<script>
  document.querySelector('#btn3').addEventListener('click', e => {
    document.querySelector('#btn3').nextElementSibling.showModal()
  })
</script>

<button commandfor="my-modal1" command="show-modal">
  Show modal
</button>

<dialog id="my-modal1" closedby="any">
  <button command="close" commandfor="my-modal1">close</button>

  <h1>My modal</h1>
</dialog>