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

当我点击一个带有“whiteout”背景的链接时，我正在使用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’s dialog是如何工作的，几乎就是这样。

单击背景时淡出Javascript“模态窗口”？

2 个答案: