javascript - 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();
});