在Bootstrap中的Modal,select2插件会有不显示,由于其z-index小于modal,还有另一个问题是,修正z-index以后,select2不会自动失去焦点的问题。代码解决以下:javascript
<style> /*select2在Bootstrap的modal中默认被遮盖,如今强制显示在最前*/ .select2-drop { z-index: 10050 !important; } .select2-search-choice-close { margin-top: 0 !important; right: 2px !important; min-height: 10px; } .select2-search-choice-close:before { color: black !important; } /*防止select2不会自动失去焦点*/ .select2-container { z-index: 16000 !important; } .select2-drop-mask { z-index: 15990 !important; } .select2-drop-active { z-index: 15995 !important; }
由于modal多是后生成的,因此绑定select2事件时,应该先指定其父元素:java
$(function(){ $("#PaymentId").select2({ placeholder: "--请选择--", dropdownParent: $("#myModal"), allowClear: true }); });
在弹出modal里面是单选select2的时候,我遇到过没法输入的问题,这个时候,只须要把Modal上的tabindex属性删除就好了,(remove tabindex="-1" from modal)插件