欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

在BootStrap的modal中使用Select2 博客分类: Web开发 UI 

程序员文章站 2024-02-14 09:21:58
...
在普通页面中使用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://*.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal
相关标签: UI