單擊背景時是否淡出Javascript“模式窗口”？

Question

我在CSS中有一個類似於模態的窗口，可以通過Javascript淡入。 HTML是這樣的：

<div class="whiteout">
<div class="modal">
    <a class="modal-close" title="Close"></a>
    // modal window content
</div>
</div>

CSS是這樣的：

.whiteout {
    display: none;
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    background-color: #fff; 
    background-color: rgba(255, 255, 255, 0.7);
}
.modal {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 200;
    border: 12px solid #666;
    border: 12px solid rgba(0, 0, 0, 0.5);
    -moz-border-radius: 12px;
    border-radius: 12px;
}

當我單擊帶有“白色”背景的鏈接時，我正在使用jQuery來顯示模式窗口，並且當我單擊背景時，我希望它淡出。

$('.share-link').click( function() {
    $('.whiteout').fadeIn();
    return false;
} );
$('.whiteout').click( function() { // click the background
    $(this).fadeOut();
} );
$('.modal-close').click( function() { // close button on the modal window
    $('.whiteout').fadeOut();
} );

但是，每當我單擊模式窗口以及背景時，它就會淡出，因為從技術上講，它位於“ whiteout”元素內。 當我在.modal元素內單擊時，是否可以停止這種情況？

Answer 1

嘗試這個：

$('.whiteout').click( function(e) { // click the background
    if(e.target == this)
       $(this).fadeOut();
} );

Answer 2

最好的辦法是將whiteout div移到正文的末尾，完全在內容區域之外。 使用正確的CSS，whiteout元素可以存在於DOM中的任何位置，但仍然可以達到正確的效果。

例如，看看jQuery UI對話框的工作原理，它幾乎可以做到這一點。