面向较低层到关闭模式对话框

Question

我有一个简单的模式对话框打开这样的：

<div id="social" class="overlay"> 
    <div class="inner"> 
    <a class="close" href="#"><span class="icon-close"></span></a> 

    CONTENT 

</div> 
</div> 

这里的CSS：

.overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 100; 
    background: fade(@black, 75%); 
    display: none; 
    z-index: 999; 
} 

#social .inner { 
    margin: 0 auto; 
    z-index: 1000; 
    width: 380px; 
} 

这里是JS：

$(document).ready(function(){ 
    $("#social").css("height", $(document).height()); 

    $(".social").click(function(){ 
     $("#social").fadeIn(); 
     return false; 
    }); 

    $(".close").click(function(){ 
     $("#social").fadeOut(); 
     return false; 
    }); 
}); 

当有人点击与类close的链接时，模式框关闭。我想模态框也关闭时，有人点击模式框外的任何地方，所以覆盖层（z-index:999）的任何地方。我不知道如何定位底层（z-index:999）而不会影响顶层（z-index:1000）。

我对jQuery不太了解，所以如果你能以新手的方式说出你的建议，那会很棒。谢谢！ :)

Answer 1

通过在叠加层上附加单击事件处理程序，可以在叠加层单击时淡出模式框。 JSFiddle

HTML

<input type="button" class="social" value="test" /> 
<div id="social" class="overlay"> 
    <div class="inner"> 
     <a class="close" href="#"> 
      <span class="icon-close">X</span> 
     </a> 
     CONTENT 
    </div> 
</div> 

CSS

.overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 100; 
    background: rgba(0, 0, 0, 0.5); 
    display: none; 
    z-index: 999; 
} 
#social .inner { 
    margin: 0 auto; 
    z-index: 1000; 
    width: 380px; 
} 

jQuery的

$(document).ready(function() { 

    $("#social").css("height", $(document).height()); 

    $(".social").click(function() { 
     $("#social").fadeIn(); 
     return false; 
    }); 

    $(".close").click(function() { 
     $("#social").fadeOut(); 
     return false; 
    }); 


    //This is the part that handles the overlay click 
    $("#social").on('click', function (e) { 
     if (e.target == this) { 
      $(this).fadeOut(); 
     } 
    }); 
});