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结构： -

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

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

Answer 1

我建议只使用css类来设置弹出窗口样式，并仅使用JS来添加，删除和切换该类。不知道你的工作练习有多接近这个小提琴，但我已经准备好了这个，以显示如何检查文档/窗口点击事件以成功打开/关闭弹出窗口。

＆＃13;

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');
  }
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

通过单击外部隐藏弹出窗口（Philip Waltons解决方案的问题）

1 个答案: