jQuery Event Wrapper Experiments

by Bacher

HTML

<div class="father">
    <div class="wrapper">
    <div class="some-wrapper-item">
    </div>
    <div class="popup">
        <div class="popup-item">
        </div>
    </div>
</div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    width: 100%;
    min-height: 100%;
    position: relative;
    background: #ddd
}

.some-wrapper-item {
    width: 200px;
    height: 200px;
    background: green;
}

.popup {
    width: 200px;
    height: 200px;
    background: #eee;
    border: 1px solid #aaa;
    position: absolute;
    left: 100px;
    top: 100px;
}

.popup-item {
    width: 40px;
    height: 30px;
    background: #369;
    margin: 10px;
}

JavaScript

var $popup = $('.popup');
$popup.close = function(){
    var that = this;
    this.hide();
    setTimeout(function(){
        that.show();
    }, 2000);
};

$('.wrapper')
    .on('click', '.popup', function(event) {
        event.isPopup = true;
    })
    .on('click', function(event) {
        if (!event.isPopup) {
            $popup.close();
        }
    });

$('.father').on('click', function(event) {
    if (event.isPopup) {
        alert('IN POPUP');
    } else {
        alert('OUT OF POPUP');
    }
});