Sample:

Code:

<button class="open">Login</button>

<dialog tabindex="-1" aria-labelledby="heading">
  <form method="dialog">
    <button>Close</button>
  </form>
  
  <h1 id="heading">Login</h1>
</dialog>

<script>
  const dialogOpen = document.querySelector('.open')
  const dialog = document.querySelector('dialog')

  dialogOpen.addEventListener('click', e => {
    dialog.showModal()
  })
</script>