modal

モダリティウィンドウの作成

ボタンを押すとウィンドウが表示され、周囲の背景にシャドウが表示され、閉じるボタンを押すとウィンドウが消えます.

modal html

モード層(シャドウバックグラウンド)とモードパッケージ(コンテンツ)からなる

modal css

位置:固定ウィンドウを作成します.

visibility:hiddenを適用した後、active classを追加した場合、visibility:visibleに変換して表示します.

modal js

ボタンをクリックしてclassListに「active」を追加させます.

シャドウバックグラウンドまたは閉じるボタンを押すと、activeクラスがクリアされます.

const layer = document.querySelector('.modal-layer');
layer.addEventListener('click', function() {
    modal.classList.remove('active')
})

modal.addEventListener('click', function(e) {
    let isLayer = e.target.classList.contains('modal-layer');

    if(isLayer) {
        modal.classList.remove('active');
    }
})

e.target一瞬クリックすると、クリックした部分がtargetになります.
e.currentTargetのターゲットはclickというeventListenerです.