On click stopPropagation

by Jader Wagner

HTML

<div class="wrapperExtraImg"></div>
<div id="overlayFancy"></div>

CSS

.wrapperExtraImg {
    width:128px;
    height:128px;
    background-color:red;
}
#overlayFancy {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    line-height: 500px;
    text-align:center;
    background-color:#ccc;
    display:none;
}
#overlayFancy img {
    width: 100px;
    height:100px;
    background-color: #00f;
}

JavaScript

$(document).on('click', '.wrapperExtraImg', function () {
    $("#overlayFancy").append("<img src=" + $(this).attr('id') + ">").stop().fadeIn(500);
});


$(document).on('click', '#overlayFancy img', function (event) {
    event.stopPropagation();
});

$(document).on('click', '#overlayFancy', function () {
    $('#overlayFancy').stop().fadeOut(300, function () {
        $(this).find('img').remove();
    });
});