dialogタグで作成したモーダルのサンプル(::backdrop)

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

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

const modal = document.getElementById('modal')
const openButton = document.getElementById('openModal')
const closeButton = document.getElementById('closeModal')

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

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

元記事を表示する