Question

Please see this link

What I tried

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

I want to close the popup only click on the “close” button and the “mask” area…

But my script close the popup where ever click on the popup.

I am searched this error on google but i can’t to find.

Product details should be inside <div class="mask". eg site link

Any one please help me.

Advance thanks…

Answer 1

Check over event.target if element desired has been clicked:

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

Fiddle: http://jsfiddle.net/AYdGS/13/