modal

3251 ワード
テキストリンク

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


ボタンを押すとウィンドウが表示され、周囲の背景にシャドウが表示され、閉じるボタンを押すとウィンドウが消えます.
  • 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です.
    nettty
    [Alogithm]入国審査