<dialog>
  Native dialog box!
  
  <button class="btn btn-primary mt-4 btn-block close-modal">close dialog</button>
</dialog>
<button class="btn btn-primary open-modal">Open dialog</button>

body {
  padding: 3.5rem;
}

dialog {
  padding: 3rem;
  border-radius: 4px;
  border: none;
  box-shadow: 0 4px 6px lightgray;
  transition: transform .5s;
  transform: scale(.1);
  
  &[open] {
    transform: scale(1);
  }
}

::backdrop {
  background: rgba(slateblue, .5);
}

const modal = document.querySelector('dialog')
const openBtn = document.querySelector('.open-modal')
const closeBtn = document.querySelector('.close-modal')


// showModal() makes modal visible (adds `open` attribute)
openBtn.addEventListener('click', () => modal.showModal())


// close() hides modal (removes `open` attribute)
closeBtn.addEventListener('click', () => {
  modal.close()
})