javascript - Jquery UI 不适用于 bootstrap 3 模态

Question

我的 bootstrap3 模型中有一个 jquery UI DataPicker。当我触发模态时。 DataPicker 可以正确显示。我也可以选择数据。但是当我点击月份选择器或年份选择器并选择一个选项时。它会关闭模态框，而 DatePicker 会单独留在页面上。

这是我的 Html 代码:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target   ="#myModal">
              DatePicker
           </button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
              </div>
              <div class="modal-body">
                <label for="startDate">Date :</label>
                <input type='text' class='datepicker' >
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

js代码:

 $(".datepicker").closest(".modal").css("z-index") 
    $(".datepicker").datepicker({

    changeMonth: true,

    changeYear: true,
    dateFormat: "yy-mm",
    showButtonPanel: true,
    currentText: "This Month",
    onChangeMonthYear: function (year, month, inst) {
        $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month - 1, 1)));
    },
    onClose: function(dateText, inst) {
        var month = $(".ui-datepicker-month :selected").val();
        var year = $(".ui-datepicker-year :selected").val();
        $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1)));
    }
}).focus(function () {
    $(".ui-datepicker-calendar").hide();
}).after(
    $("<a href='javascript: void(0);'>clear</a>").click(function() {
        $(this).prev().val('');
    })
);

我已经测试了 datapicker 的 z-index，它对我不起作用......

这里是 js Bin [1]: http://jsbin.com/uhizoRA/52/edit

Answer 1

我自己想通了...

首先我监听了隐藏事件。

 $('#myModal').on('hide.bs.modal', function (e) {

    if(event.target instanceof HTMLDivElement)
      {
        return false; 
      }
        // alert(event.target);
       return true; // validate before show the modal
  })

并检查是什么触发了事件，然后进行比较。

注意:typeof 只能返回限制对象类型:

Type    Result
Undefined   "undefined"
Null    "object"
Boolean "boolean"
Number  "number"
String  "string"
Host object (provided by the JS environment)    Implementation-dependent
Function object (implements [[Call]] in ECMA-262 terms) "function"
E4X XML object  "xml"
E4X XMLList object  "xml"
Any other object    "object"

所以，如果您想检查特定对象的类型，请使用 instanceof 方法。