jquery - 关闭弹出窗口仅使用jquery单击关闭和遮罩区域

Question

请看这个链接

我试过的

jQuery

$("div.prod").click(function() {
    $("div.mask").css("display","");
});

$("div.mask,div.close").click(function() {
    $("div.mask").css("display","none");
});

HTML

<div class="prod">
    Product 1
</div>
<div class="prod">
    Product 2
</div>

<br style="clear:both"/>

<div class="mask" style="display:none">
    <div class="popup">
        <div class="close">X</div>
        <div class="details">product details will come here</div>
    </div>
</div>

CSS

.prod {
    width:100px;
    height: 150px;
    border:1px solid red;
    float:left;
}

.mask {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    opacity:0.8%;
     background-color: rgba(255, 255, 255, 0.55);
}

.popup {
    position:absolute;
    width:250px;
    height:205px;
    left:100px;
    top:50px;
    border:5px solid purple;
    background:#F5F5F5;
}

.details {
    width:220px;
    height:120px;
}

.close {
    cursor:pointer;
    position:absolute;
    top:0px;
    right:0px;
}

我想关闭弹出窗口，只需单击“关闭”按钮和“掩码”区域...

但是我的脚本会在单击弹出窗口的地方关闭弹出窗口。

我在谷歌上搜索了这个错误，但我找不到。

产品细节应该在里面<div class="mask"。例如网站链接

任何人请帮助我。

提前谢谢...

Answer 1

检查event.target是否单击了所需的元素：

$("div.mask,div.close").click(function(event) {
    var $target = $(event.target);

    if ($target.hasClass("mask") == true
     || $target.hasClass("close") == true) {
        $("div.mask").css("display","none");
    };
});

小提琴：http: //jsfiddle.net/AYdGS/13/