在BootStrap的modal中使用Select2
2015-09-13 12:05
483 查看
在普通页面中使用Select2是正常的,但是在Modal中使用就发现了一些问题,首先如果在页面加载完成后就调用
$(".select2").select2();是会有问题的,你会发现Modal框中的select显示不正常,正确的做法是要改成
$("#editModal").on("shown.bs.modal", function(){
$(".select2").select2();
})
这是在Modal显示出来后再初始select2。
但是又发现另一个问题,如果你的Modal定义是下面这样的
<div class=" content modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="false">
你会发现select2的输入框不能输入,这时候把tabindex="-1"去掉就可以了。
还有一个方法是
在js 内加上下面这句
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
经实际验证,tabindex="-1"有时候不一定有效,加上上面这句是可以的
参考文章http://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal
$(".select2").select2();是会有问题的,你会发现Modal框中的select显示不正常,正确的做法是要改成
$("#editModal").on("shown.bs.modal", function(){
$(".select2").select2();
})
这是在Modal显示出来后再初始select2。
但是又发现另一个问题,如果你的Modal定义是下面这样的
<div class=" content modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="false">
你会发现select2的输入框不能输入,这时候把tabindex="-1"去掉就可以了。
还有一个方法是
在js 内加上下面这句
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
经实际验证,tabindex="-1"有时候不一定有效,加上上面这句是可以的
参考文章http://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal
相关文章推荐
- Bootstrap弹出框
- Bootstrap标签Tabs
- Bootstrap响应式布局
- Bootstrap幻灯片
- 扩展Bootstrap Tooltip插件使其可交互
- bootstrap-sidebar,后台边栏折叠功能
- bootstrap第三天
- Bootstrap响应式折叠导航
- 让IE6 ~IE11支持Bootstrap的解决方法
- bootstrap modal 弹出其他页面
- 基本的Bootstrap模板
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- django bootstrap3
- [Bootstrap]7天深入Bootstrap(4)CSS组件
- bootstrap第二天
- Bootstrap模态框(modal)垂直居中
- bootstrap 后台框架 ace
- IE怎么bootstrap怎么居中兼容
- bootstrap笔记第一天
- checkbox实现全选,全不选,反选。Bootstrap-用ICheck插件给CheckBox换新装!