dialogタグで作成したモーダルのサンプル(スクロール不可)

<button id="openModal">モーダルを開く</button>
<dialog id="modal">
    <p>これはモーダルです。</p>
    <button id="closeModal">閉じる</button>
</dialog>

::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

// モーダルを開く
openButton.addEventListener('click', () => {
  modal.showModal()
  document.body.style.overflow = 'hidden'
})

// モーダルを閉じる
closeButton.addEventListener('click', () => {
  modal.close()
  document.body.style.overflow = ''
})

元記事を表示する