onClick outside

by amindunited

HTML

<div class="ourPopup">
    <ul>
        <li><span>First list Item</span></li>
        <li><span>Second list Item</span></li>
        <li><span>Third list Item</span></li>
        <li><span>Dee list Item</span></li>
        <li><span>Fifth list Item</span></li>
    </ul>
</div>
<div class="others"></div>
<div class="others"></div>
<div class="others"></div>
<div class="others"></div>
<div class="others"></div>
<div class="toggle">Toggle</div>

CSS

.ourPopup {
    width: 200px;
    height: 150px;
    border: solid 3px gray;
    border-radius : 5px;
    display: inline-block;
    vertical-align: top;
    margin: 2px;
}
.ourPopup ul li {
    border: solid 1px gray;
}
.others {
    width: 150px;
    height: 150px;
    background-color: rgba(128, 128, 128, .5);
    border: solid 3px gray;
    border-radius : 5px;
    display: inline-block;
    vertical-align: top;
    margin: 2px;
}
.toggle {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 128, 28, .5);
    border: solid 3px gray;
    border-radius : 5px;
    display: inline-block;
    vertical-align: top;
    margin: 2px;
    line-height: 50px;
    
}

JavaScript

function hideOurPopup(e){
    console.log($(e.target)==$('.ourPopup'), $('.ourPopup').find(e.target).length);
    //test if the target was this popup: $(e.target)==$('.ourPopup')
    //test if the target was a child of this popup: $('.ourPopup').find(e.target).length
    console.log($(e.target));
    if ($(e.target).is('.ourPopup') || $('.ourPopup').find(e.target).length) {
    
    } else {
        $('.ourPopup').toggle();//Hide the popup
        $(document).off('mousedown', hideOurPopup);//remove the global listener
    }
    
};
//Start over
function resetPopup () {
    $('.ourPopup').show();
    $(document).on('mousedown', hideOurPopup);
};

$(function(){
    $('.toggle').on('click', resetPopup);
    $(document).on('mousedown', hideOurPopup);
});