BootStrap的modal中用Select2不显示无法输入
在BootStrap的modal中使用Select2，魔态窗口使用select2筛选下拉框。
select2显示在modal窗口的下面，因为select2的z-index小于modal。
感觉是这个框架的bug，层级被覆盖了。
起初我尝试在浏览器一个一个修改 z-index:属性，发现modal窗口的属性
.modal-backdrop {
z-index: 2040 !important;
}
.modal {
z-index: 2050 !important;
}
你强制这么高的层级，还让别的模块属性怎么玩呢。。我勾掉这个两个z-index之后，select2上来了位置显示正确了。此时搜索框获取不到焦点了，无法输入，呵呵呵。。
我的代码：
html:
<!-- 弹出框 style="z-index: 1050 !important;"--> <div class="modal fade" id="modal_new" tabindex="-1" role="dialog" aria-labelledby="" > <div class="modal-dialog">
js:
$(function(){
$(".select2").select2();
});
代码解决办法：
1、先解决层级问题：道高一尺魔高一丈。
css :
.select2-container--open{
z-index:9999999
}
2、再解决获取不到焦点问题：
一般情况下把modal窗的tabindex=“-1”删掉就可以了。
如果没生效，可以加段js强制其获取焦点
加js ：
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
这两种方式我都试过，我的环境是都可以的。（开发者说PHPersay）
本文链接二维码可以保存在本地：保存
http://phpersay.com/index.php?c=index&m=articleDetailInfo&id=64
分类 Javascript | 浏览 (3650) | 赞 (0) | 踩 (0) | | 2017-05-03 17:04:54 |
相关文章