Question

I am using Ben Alman’s outside events plugin to close a modal window when the user clicks outside of it. This worked great until I had the need to use jQuery UI’s datepicker inside the modal. Since the elements comprising the widget are not placed inside the modal, the modal closes when selecting a date, which is the correct behavior. To attempt to solve the problem, I did the following:

$('#modal-window, #ui-datepicker-div').one('clickoutside', function(){

    // close the modal window

});

That just causes the modal window to close when it is clicked.

Answer 1

From the page you link in your question:

Note that you can also utilize the event.target property, which references the actual element clicked, in your event handler logic. This may be useful if you want to constrain the ‘outside-ness’ of the click to certain elements or containers.

I’d use event.target along with closest to find whether the link was in the datepicker.

$('#modal-window').one('clickoutside', function(event) {
    if (!$(event.target).closest('#ui-datepicker-div').length) {
        $(this).hide(); // or whatever code you have for hiding the modal window
    }
});