terrorista terrorista - 3 months ago 10
CSS Question

clicking on select box that goes outside popup closes the popup

I have a popup, and inside I have a select box which options goes outside the popup. So, to close my popup I need to click outside, the problem is when I select an option from the select box that is outside, its closing also the popup :/

this is my popup:

<div id="form-modal" style="display:none" >

<div id="form-modal-meeting" class="actions_" >
<div class="action_popup">
<div class="date-label" ><%= l(:priority) %></div>
<select class="list_cf" id="issue_custom_field_values_27" name="issue[custom_field_values][27]"><option value="">&nbsp;</option><option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
</select>
</div>
</div>
</div>


and this is my closing jquery function:

var mouse_is_inside = false;

$(document).ready(function()
{
$('.action_popup').hover(function(){
mouse_is_inside=true;
// introJs().exit();
}, function(){
mouse_is_inside=false;
});

$("body").mouseup(function(){
if(! mouse_is_inside) {
if ($('#form-modal-watcher').css('display') == 'block') {
mouse_is_inside=true;
}
else {
$('#form-modal').fadeOut();
}
}
});

$('#ui-datepicker-div').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});


$( ".add_watcher_btn" ).click(function() {
mouse_is_inside=true;
});


});

Answer

You better check the event.target element, if this is a descendant of your modal element, with jQuery::closest method.

$("body").mouseup(function(event){
  if(isInside(event) === false) {
    $('#form-modal').fadeOut();
  }
});

function isInside (event) {
  return $(event.target).closest('#form-modal').length !== 0;
}

Demo: https://jsfiddle.net/4mjg2uwb/