bootstrap modal和一些组件在一起使用会产生一些冲突,已知的就有bootstrap-datepicker和select2
select2
bootstrap version : v3.3.5
select2 version : 4.0.5
问题:当modal添加tabindex属性时,select2的input搜索不能聚焦。
修复:去掉tabindex
<div class="modal fade" id="mymodal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">select2</div>
<div class="modal-body">
<div class="form-group">
<label>客户</label>
<select id="select2">
<option>hello</option>
<option>wold</option>
<option>jano</option>
<option>well</option>
</select>
</div>
</div>
</div>
</div>
</div>
tabindex 属性规定元素的 tab 键控制次序(当 tab 键用于导航时),几乎所有浏览器均 tabindex 属性,除了 Safari.
1 是第一个,这里-1是为了获得tab优先使用的保险做法。
bootstrap-datepicker
bootstrap version : v3.3.5
bootstrap-datepicker version:1.7.1
问题:datepicker弹出选择后hide事件会触发modal的hide事件。
修复:这是因为datepicker的hide事件向上冒泡了,所以只要在hide事件方法中阻止datepicker向上冒泡。
$('.datepicker').datepicker().on('hide', function(event) {
event.stopPropagation();
});
网友评论