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

 $(".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('');
    })
);

我测试了数据贴纸的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方法。

Jquery UI与bootstrap 3模式不兼容

1 个答案: