外でクリックしてポップアップを非表示にします（Philip Waltonsソリューションの問題）

Question

私はそれの外をクリックしてポップアップを閉じるという質問を以前に聞いてきました。私は幾分複雑なポップアップを持ち、Phillip Waltonが提供するソリューションは私のために働いていません。

彼のコードは単に私のページをぼやけてしまったが、ポップアップが表示されなくなった。

$(document).on('click', function(event) { 
if (!$(event.target).closest('.maincontainer').length) { 
popup.classList.remove('popup--open'); 
popup.style.display = 'none'; 
popupAccessory.style.display = 'none'; 
popupAccessory.classList.remove('popup--accessory--open'); 
maincontainer.classList.remove('blurfilter'); 
} 
}); 

私も試してみました：私は、ポップアップ自体に含めて、任意の場所をクリックしたときに

window.addEventListener('click', function(event) { 
if (event.target != popup) { 
popup.classList.remove('popup--open'); 
popup.style.display = 'none'; 
popupAccessory.style.display = 'none'; 
popupAccessory.classList.remove('popup--accessory--open'); 
maincontainer.classList.remove('blurfilter'); 
} 
}, true); 

これは、ポップアップを閉じます。ポップアップではない画面の一部をクリックしたときに閉じてほしい。 ポップアップを開くためのコード：

function openpopup() { 
popup.style.display = 'initial'; 
setTimeout(function(){ 
popup.classList.add('popup--open'); 
popup.style.boxShadow = '0 0 45px 2px white'; 
maincontainer.classList.add('blurfilter')}, 10); 

for (let i = 0; i < listitems.length; i++) { 
setTimeout(function() { 
    listitems[i].classList.add('visible'); 
}, 100); 
} 
} 

私は

popupOpenbtn.addEventListener('click', openpopup); 

]ボタンをHTML構造イベントリスナを追加しました： - 私は唯一のCSSクラスを使用することをお勧めし

<div class="maincontainer> 
...all my page content... 
</div> 

<div class="popup"> 
...popup contents... 
</div 

Answer 1

をポップアップのスタイルを設定し、そのクラスを追加、削除、および切り替えするためにのみJSを使用します。あなたの作業練習にどのくらい近づいているかはわかりませんが、私はこれを準備して、文書/ウィンドウのクリックイベントをチェックして、ポップアップウィンドウを正常に開いたり閉じたりする方法を示しています。

var popupOverlay = document.querySelector('#popup__overlay'); 
 

 
var popupOpenButton = document.querySelector('#popupOpenButton'); 
 
var popupCloseButton = document.querySelector('#popupCloseButton'); 
 
var mainContainer = document.querySelector('main'); 
 

 
function closestById(el, id) { 
 
    while (el.id != id) { 
 
    el = el.parentNode; 
 
    if (!el) { 
 
     return null; 
 
    } 
 
    } 
 
    return el; 
 
} 
 

 
popupOpenButton.addEventListener('click', function(event) { 
 
    popupOverlay.classList.toggle('isVisible'); 
 
}); 
 

 
popupCloseButton.addEventListener('click', function(event) { 
 
    popupOverlay.classList.toggle('isVisible'); 
 
}); 
 

 
mainContainer.addEventListener('click', function(event) { 
 
    if (popupOverlay.classList.contains('isVisible') && !closestById(event.target, 'popup__overlay') && event.target !== popupOpenButton) { 
 
    popupOverlay.classList.toggle('isVisible'); 
 
    } 
 
});

#popup__overlay { 
 
    display: none; 
 
    background-color: rgba(180, 180, 180, 0.5); 
 
    position: absolute; 
 
    top: 100px; 
 
    bottom: 100px; 
 
    left: 100px; 
 
    right: 100px; 
 
    z-index: 9999; 
 
    text-align: center; 
 
} 
 

 
#popup__overlay.isVisible { 
 
    display: block; 
 
} 
 

 
main { 
 
    height: 100vh; 
 
}

<aside id="popup__overlay"> 
 
    <div class="popup"> 
 
    <h2>Popup title</h2> 
 
    <p> 
 
     Lorem ipsum 
 
    </p> 
 
    <button id="popupCloseButton">Close popup</button> 
 
    </div> 
 

 
</aside> 
 

 
<main> 
 
    <div class="buttonWrapper"> 
 
    <button id="popupOpenButton">Open popup</button> 
 
    </div> 
 
</main>