이 팝업을 클릭하여 닫으십시오.

Question

이 팝업을 닫기위한 방법을 찾으려면 그 곳을 클릭하여 실패했습니다. 지금은 직접 클릭하면 닫힙니다.

도움을 주셔서 감사합니다.

/* Popup container - can be anything you want */ 
    .popup { 
    position: relative; 
    display: inline-block; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    } 

    /* The actual popup */ 
    .popup .popuptext { 
    visibility: hidden; 
    width: 160px; 
    background-color: #555; 
    color: #fff; 
    text-align: center; 
    border-radius: 6px; 
    padding: 8px 0; 
    position: absolute; 
    z-index: 1; 
    bottom: 125%; 
    left: 50%; 
    margin-left: -80px; 
    } 

    /* Popup arrow */ 
    .popup .popuptext::after { 
    content: ""; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin-left: -5px; 
    border-width: 5px; 
    border-style: solid; 
    border-color: #555 transparent transparent transparent; 
    } 

    /* Toggle this class - hide and show the popup */ 
    .popup .show { 
    visibility: visible; 
    -webkit-animation: fadeIn 1s; 
    animation: fadeIn 1s; 
    } 

HTML

<h2>Popup</h2> 
    <div class="popup" onclick="myFunction()">Click me to toggle the popup! 
    <span class="popuptext" id="myPopup">A Simple Popup!</span> 
    </div> 

자바 스크립트

<script> 
    // When the user clicks on div, open the popup 
    function myFunction() { 
    var popup = document.getElementById("myPopup"); 
    popup.classList.toggle("show"); 
    } 
    </script> 

CSS는 당신의 도움에 미리 감사드립니다. 나는 당신의 팝업을 가정

Answer 1

는 # 팝업 - 컨테이너 사업부 컨테이너를

document.querySelector(":not(#popup-container)").addEventListener(function(event){ 
    popup.classList.remove("show") 
}) 

UPDATE

function myFunction(e) { 
 
    var popup = document.getElementById("myPopup"); 
 
    e.stopImmediatePropagation() 
 
    if(!popup.classList.contains('show')){ 
 
     popup.classList.add("show"); 
 
     document.querySelectorAll("*").forEach(function(ele) { 
 
     ele.addEventListener('click', myFunction) 
 
    }) 
 
    } 
 
    else{ 
 
    popup.classList.remove("show"); 
 
    document.querySelectorAll("*").forEach(function(ele) { 
 
     ele.removeEventListener('click', myFunction) 
 
    }) 
 
    } 
 
}

.popup { 
 
    position: relative; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 

 
/* The actual popup */ 
 

 
.popup .popuptext { 
 
    visibility: hidden; 
 
    width: 160px; 
 
    background-color: #555; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 8px 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
    bottom: 125%; 
 
    left: 50%; 
 
    margin-left: -80px; 
 
} 
 

 

 
/* Popup arrow */ 
 

 
.popup .popuptext::after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    margin-left: -5px; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    border-color: #555 transparent transparent transparent; 
 
} 
 

 

 
/* Toggle this class - hide and show the popup */ 
 

 
.popup .show { 
 
    visibility: visible; 
 
    -webkit-animation: fadeIn 1s; 
 
    animation: fadeIn 1s; 
 
}

<h2>Popup</h2> 
 
<div class="popup" onclick="myFunction(event)">Click me to toggle the popup! 
 
    <span class="popuptext" id="myPopup">A Simple Popup!</span> 
 
</div>

Answer 2

가장 쉬운은에 리스너를 추가하는 것입니다 문서가 표시되면 클릭이 팝업 아이에서 발생하지 않으면 토글 (또는

var popup = document.getElementById('popup'); 
 
document.addEventListener('click', function(e){ 
 
    var parent; 
 
    if(!(parent = e.target.closest('#popup'))){ 
 
    popup.classList.remove('show'); 
 
    } 
 
});

/* Popup container - can be anything you want */ 
 
    .popup { 
 
    position: relative; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    
 
    visibility: hidden; 
 
    opacity: 0; 
 
    } 
 

 
    /* The actual popup */ 
 
    .popup .popuptext { 
 
    width: 160px; 
 
    background-color: #555; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 8px 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
    bottom: 125%; 
 
    left: 50%; 
 
    margin-left: -80px; 
 
    } 
 

 
    /* Popup arrow */ 
 
    .popup .popuptext::after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    margin-left: -5px; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    border-color: #555 transparent transparent transparent; 
 
    } 
 

 
    /* Toggle this class - hide and show the popup */ 
 
    .popup.show { 
 
    opacity: 1; 
 
    visibility: visible; 
 
    -webkit-animation: fadeIn 1s; 
 
    animation: fadeIn 1s; 
 
    }

<h2>Popup</h2> 
 
    <div class="popup show" id="popup">Click me to toggle the popup! 
 
     <span class="popuptext" id="myPopup">A Simple Popup!</span> 
 
    </div>