I have a form system which is dynamically generated.
The code below is the button which calls the calendar.
<input id="btn1_0" type="button" value="☵" class="rsform-calendar-box btnCal rsform-calendar-button btn btn-default" onclick="RSFormPro.YUICalendar.showHideCalendar('cal1_0Container');">
Here's the div which shows up when the above button is clicked. The button toggles the style display:none
when clicked inside the div:
<div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single">
Calendar Here
</div>
I want to hide the calendar when someone clicks outside of the div too.
I tried this JS but it won't work as it sets display:none
to the div. What am I doing wrong?
jQuery(document).click(function(event) {
if ( !jQuery(event.target).hasClass('yui-calcontainer')) {
jQuery(".yui-calcontainer").hide();
}
});