Question

请参阅此link

我尝试了什么

的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"内。例如网站link

任何人请帮帮我。

预感谢...

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/

关闭弹出窗口只需点击关闭＆amp;使用jquery进行掩码区域

1 个答案: