Jquery UI 不适用于 bootstrap 3 模态答案

【问题标题】：Jquery UI don't work well with bootstrap 3 modalJquery UI 不适用于 bootstrap 3 模态
【发布时间】：2013-12-14 05:53:55
【问题描述】：

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

【问题讨论】：

datepicker conflict 是结合 bootstrap 和 jQuery UI 的最大问题之一。
是的，但我已经解决了这个问题。 :D

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

我自己想通了……

首先我要监听 hide 事件。

 $('#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 方法。

【讨论】：