How to hide overlay on Click outside a class - html

Question

I have a html like
<button id="reporting"></button>
<ul class="showHideChkBox">
<li><label><input name="rptHeaders" type="checkbox"><span>Name</span></label></li>
<li><label><input name="rptHeaders" type="checkbox"><span>Client ID</span></label></li>
<li><label><input name="rptHeaders" type="checkbox"><span>Document Name</span></label></li>
</ul>
On click on the button I have popup the Ul class named showHideChkBox.
on the same time I append a overlay to ul
$('<div class="divOpcty"></div>').insertBefore('.showHideChkBox');
CSS
.divOpcty {
bottom: 0;
right: 0;
opacity: .1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #000;
z-index: 1100;
}
the overlay is working but I can't remove this overlay class when click any where on the window except click in the ul li checkbox.
I tried
$('html').on("click", rptRemoveOverlay);
function rptRemoveOverlay() {
if (RPT_Action == 1) {
RPT_Action = 2;
} else {
$(".divOpcty").fadeOut('slow', function () {
$(this).remove();
$('.showHideChkBox').fadeToggle(1000);
});
RPT_Action = 1;
}
}
but here when click on the checkbox the showHideChkBox also hiding.
my need is when click on the button the ul li chceckbox list is showing and also the overlay is showing.and when click any where out side Ul the ul will hide and also the overlay will hide.
thanks in advance