Jquery UI don'使用bootstrap 3模式时效果不佳
Jquery UI don't work well with bootstrap 3 modal
我的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">×</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索引,但对我不起作用。。。
这是js Bin[1]:http://jsbin.com/uhizoRA/52/edit
我自己想好了。。。
首先我要听隐藏事件
$('#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"
因此,如果您想检查specifec对象的类型,请使用instanceof
方法。
相关文章:
- 如何动态更改React Bootstrap模式的内容
- Bootstrap在页面加载缓慢时会立即显示隐藏的模式对话框
- angular ui bootstrap:当模式关闭时,promise被解析/拒绝
- 在Bootstrap模式窗口中打开远程内容
- bootstrap模式在windowsvista上的IE8上运行极其缓慢
- Bootstrap JS模式加载,但不可编辑
- Angular Bootstrap正在创建重复的引导模式
- Jquery UI don'使用bootstrap 3模式时效果不佳
- 在ajax回调(safari)中调用bootstrap模式显示
- 一旦Bootstrap模式选项已经存在,请更改该选项
- 处理Bootstrap关闭模式
- 当内部的任何模式关闭时,Bootstrap模式关闭
- bootstrap日期选择器轨道无法通过带有bootstrap模式的simple_form工作
- Bootstrap 3模式从水平到内联的变化-调整大小很尴尬
- 我需要在我的模式中使用bootstrap 3.0.2的popover
- Twtitter Bootstrap模式显示事件多次触发
- bootstrap youtube视频模式自动播放
- 模式和输入组插件中的Bootstrap popover
- 确定哪个按钮打开了Bootstrap 3模式
- Twitter Bootstrap:如何关闭模式对话框