在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)


本文链接二维码可以保存在本地:保存

| 浏览 (2969) | (0) | (0) | | 2017-05-03 17:04:54 |


相关文章

  1. js跳到对应锚点
  2. js返回上一页并刷新