Question

如果在其外部发生点击，我怎样才能使<div>隐藏起来？我希望能够隐藏它，然后显示它背后的页面的其余内容。

<html>
<style>
.overlay
{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 80;
}
.popupContent
{
    background: #fff;
    padding: 5px;
    border: 1px solid black;
    position: fixed;
    top: 100px;
    left: 400px;
    bottom: 365px;
    right: 300px;
    z-index: 81;
}

</style>

<div id="initialPopup">
    <div class="overlay"></div>
    <div class="popupContent" onclick="hideInitialPopup()">
    Good Morning, Please Upload Your File Today!
    </div>

</div>
 



<script>
function hideInitialPopup() {
    document.getElementById("initialPopup").style.display = "block";
    $("popupContent").mouseup(function(){
    if(! mouse_is_inside) $
}
</script>

</html>

Answer 1

使用jQuery的event.target确定您是否在框内点击了：

 $(document).on('click',function(e) {
     if (!$(e.target).closest('#my_div_id').length) {
         $('#my_div_id').hide();
     } 
 });

http://jsfiddle.net/mblase75/PNYTX/

Answer 2

通常当你使用类似弹出/对话框的掩码时，最简单的方法就是将单击处理程序附加到掩码本身，单击时会隐藏弹出/对话框。

这是一个jfiddle：http://jsfiddle.net/peterdev001/SDNUj/

onclick，如何隐藏<div>并显示其背后的内容？</div>

2 个答案: