面向較低層到關閉模式對話框

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