Close div with click outside (parent) [duplicate]

懵懂的女人 提交于 2021-02-11 07:24:41

问题


This is not a new problem on stackoverflow, but I've tried everything without success.

I have a "popup" created with two divs. The parent ist the background and the child is the popup content. I want to hide the popup when the user clicks on the background (the parent).

It sounds extremly easy also for me but I can't achieve that. This is my code and what I tried (it works exacly at the opposite way as I want):

let content = document.querySelector('.popup-content');
let popup = document.querySelector('.popup');
let button = document.querySelector('button');

button.onclick = () => {
	popup.style.display = 'block';
	content.onclick = e => {
  	if(e.target !== this) {
    	popup.style.display = 'none';
    }
  }
}
.popup {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  display: none;
}

.popup-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 25%;
  min-width: 470px;
  border-radius: 4px;
}
<button>
Open Popup
</button>
<div class="popup">
  <div class="popup-content">
    <h3>Popup Title</h3>
    <p>Popup Text</p>
  </div>
</div>

Can somebody help me?


回答1:


You should separate both events and attach the click to the window so you can detect the clicks outside of popup-content like :

let content = document.querySelector('.popup-content');
let popup = document.querySelector('.popup');
let button = document.querySelector('button');

button.onclick = () => {
  popup.style.display = 'block';
}

window.onclick = e => {
  if (e.target === popup) {
    popup.style.display = 'none';
  }
}
.popup {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
}

.popup-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 25%;
  min-width: 470px;
  border-radius: 4px;
}
<button>
Open Popup
</button>
<div class="popup">
  <div class="popup-content">
    <h3>Popup Title</h3>
    <p>Popup Text</p>
  </div>
</div>



回答2:


you can try something like this :

instead of adding the EventListner to close the div on the button you need to add it on the document instead. and test on target if is not your button just like this :

    let popup = document.querySelector('.popup');
    let button = document.querySelector('button');



    // Event that hide the popin if the click happen out popin
    function closeHandler(e) {
        if (e.target !== popup) {
            // We remove the event for better perfermance
            removeCloseListner();
            // We hide the popin
            popup.style.display = 'none';
        }
    }

    // Call this function when you open your popin popin
    function addCloseLitnerToDocument() {
        document.addEventListener("click", closeHandler);
    }

    function removeCloseListner() {
        document.removeEventListener("click", closeHandler)
    }

    // Add listner to Open Popin
    button.onclick = (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    // when popin is open
                    // Add listner to the document
                    // And show the popin
                    popup.style.display = 'block';
                    addCloseLitnerToDocument();
                }


来源:https://stackoverflow.com/questions/51862116/close-div-with-click-outside-parent

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!