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

JavaScript弹出窗口不会关闭

2 个答案: