JavaScript彈出窗口不關閉

Question

我正在做一個網站的職業頁面，空缺列表在網頁上列出，當你點擊它時，彈出工作說明，事情是我想要它關閉，當你點擊其他地方我得到了第一個項目，但其餘的不會。

<div class="joblisting"> 

    <a href="#" class="contact" id="job_id"> 
     <div class="messagepop pop" id="menucontainer"> 
      job_description 
     </div> 
     <p>click to read description...</p> 
    </a> 

</div> 

http://jsfiddle.net/ZZ2BS/2/：這裏是jsFiddle。

Answer 1

您有兩個具有相同ID的元素。改爲使用班級。

$(document).click(function(event) { 

    if($('.messagepop').is(":visible")) { 
     $('.messagepop').hide() 
    } 
}); 

http://jsfiddle.net/philwills/ZZ2BS/4/

Answer 2

隱藏在點擊彈出式窗口元素的任意位置用stopPropagation()排除元素本身。

var popup = documrnt.getElementById("popup_id"); 

document.addEventListener("click", function(){ 
    popup.style.display = "none" 
}, false); 

popup.addEventListener("click", function(e){ 
    e.stopPropagation(); 
});