<dialog id="ref-dialog">
  <div id="ref-dialog-content"></div>
  <form method="dialog">
    <button autofocus>닫기</button>
  </form>
</dialog>

<style>
#ref-dialog {
  max-width: calc(100% - 2rem);
}
#ref-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}
#ref-dialog > button {
  width: calc(100% + 1em);
  margin: 1em -0.5em -0.5em -0.5em;
  padding: 0.5em;
}
</style>

<script>
document.querySelectorAll('a[href^="#ref"]')
  .forEach(el => el.addEventListener('click', e => {
    e.preventDefault()
    const dialog = document.getElementById('ref-dialog')
    const dialogContent = document.getElementById('ref-dialog-content')
    dialogContent.innerHTML = document.getElementById(new URL(el.href).hash.slice(1)).innerHTML
    if(!dialog.open)
      dialog.showModal()
  }))
</script>