-2

このリンクをご覧ください

私が試したこと

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"ます。例：サイトリンク

誰か助けてください。

よろしくお願いします...

4

1 に答える 1

3

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/

于 2013-01-21T13:22:17.813 に答える