embedded到引导模式中时，Select2不起作用
当我在引导模式中使用select2（input）时，我无法input任何内容。 这就像禁用？ 外面他模态select2工作正常。
工作示例： http : //jsfiddle.net/byJy8/1/代码：
<!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Panel</h3> </div> <div class="modal-body" style="max-height: 800px"> <form class="form-horizontal"> <!-- Text input--> <div class="control-group"> <label class="control-label" for="vdn_number">Numer</label> <div class="controls"> <!-- seleect2 --> <input name="vdn_number" type="hidden" id="vdn_number" class="input-large" required="" /> </div> </div> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> 和js
$("#vdn_number").select2({ placeholder: "00000", minimumInputLength: 2, ajax: { url: "getAjaxData/", dataType: 'json', type: "POST", data: function (term, page) { return { q: term, // search term col: 'vdn' }; }, results: function (data) { // parse the results into the format expected by Select2. // since we are using custom formatting functions we do not need to alter remote JSON data return {results: data}; } } });
答案：
在这里你可以find一个快速修复
这里是“正确的方式”： 当embedded到引导模式中时，Select2不起作用
好的，我已经准备好了。
更改
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Panel</h3> </div> <div class="modal-body" style="max-height: 800px">
至
<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Panel</h3> </div> <div class="modal-body" style="max-height: 800px">
（从模态中删除tabindex =“ – 1” ）
我在github上find了一个针对select2的解决scheme
https://github.com/ivaynberg/select2/issues/1436
解决scheme是：
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
从上面的链接复制的解释：
Bootstrap将一个监听器注册到focusin事件中，该监听器检查聚焦元素是覆盖层本身还是其后代 – 如果不是，则只是重新聚焦覆盖层。 通过将select2下拉菜单添加到主体中，可以有效地防止您在文本框中input任何内容。
你可以通过覆盖在模态上注册事件的enforceFocus函数来进行快速修正
对于Select2 v4：
使用“dropdownParent”将下拉菜单附加到模式对话框，而不是HTML主体。
<!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <select id="select2insidemodal" multiple="multiple"> <option value="AL">Alabama</option> ... <option value="WY">Wyoming</option> </select> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <script> $(document).ready(function() { $("#select2insidemodal").select2({ dropdownParent: $("#myModal") }); }); </script>
这将附加Select2下拉菜单，因此它属于模式的DOM而不是HTML主体（默认）。 请参阅https://select2.github.io/options-old.html#dropdownParent
.select2-close-mask{ z-index: 2099; } .select2-dropdown{ z-index: 3051; }
这是我用select2 4.0.0的解决scheme。 只需重写select2.css导入下面的css即可。 请确保z-index大于对话框或模式。 我只是在默认的上添加2000。 导致我的对话框的Z指数大约是1000。
只要删除tabindex =“ – 1”，并添加样式=“溢出：隐藏”
<div id="myModal" class="modal fade" role="dialog" style="overflow:hidden;"> <!---content modal here --> </div>
更改select2.css文件
z-index: 9998; ... z-index: 9999; ... z-index: 10000;
至
z-index: 10000; ... z-index: 10001; ... z-index: 10002;
Jus在Document.read（）上使用这个代码
$.fn.modal.Constructor.prototype.enforceFocus = function () {};
我有同样的问题，更新.select2-container z-index应该做的伎俩。 确保你的模态的z-index比select2低。
.select2-container { z-index: 99999; }
更新：如果上面的代码无法正常工作，也可以像@breqbuild议的那样从模态中删除tabindexes
只是为了更好地理解tabindex元素如何工作来完成接受的答案：
tabindex全局属性是一个整数，指示元素是否可以input焦点（可聚焦），是否应该参与顺序键盘导航，如果是，则在什么位置。 它可能需要几个值：
– 负值意味着元素应该是可以聚焦的，但不应该通过顺序键盘导航到达;
-0表示该元素应该可以通过顺序键盘导航进行聚焦和访问，但其相对顺序是由平台约定定义的;
– 一个积极的价值手段应该是可以通过顺序键盘导航进行调查和获取的; 其相对顺序由属性的值定义：顺序跟随tabindex的增加数量。 如果多个元素共享相同的tabindex，则它们的相对顺序将遵循它们在文档中的相对位置。
来自： Mozilla Devloppernetworking
如果你使用jQuery的移动popup窗口，你必须重写_handleDocumentFocusIn函数：
$.mobile.popup.prototype._handleDocumentFocusIn = function(e) { if ($(e.target).closest('.select2-dropdown').length) return true; }
我在bootstrap modal的select2有同样的问题，解决办法是删除overflow-y: auto; 和overflow: hidden ; 来自.modal-open和.modal classes
这里是使用jQuery去除overflow-y的例子：
$('.modal').css('overflow-y','visible'); $('.modal').css('overflow','visible');
我以前有这个问题，我使用yii2，我解决这个问题
$.fn.modal.Constructor.prototype.enforceFocus = $.noop;
只是FYI，你也可以尝试加载select2以使其工作：
setTimeout(function () {$('select').select2();}, 300);
