Question

我有一个弹出窗口，在里面我有一个选择框，其中的选项超出了弹出窗口。所以，要关闭我的弹出窗口我需要在外面点击，问题是当我从外面的选择框中选择一个选项时，它的关闭也是弹出窗口：/

这是我的弹出窗口：

    <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>

这是我的关闭jquery函数：

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 1

您最好使用event.target方法检查jQuery::closest元素，如果这是元素元素的后代。

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

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

演示：https://jsfiddle.net/4mjg2uwb/

单击弹出窗口外的选择框将关闭弹出窗口

1 个答案: