解决select2在bootstrap的modal中默认不显示的问题

2023-02-12,,,,

  在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题。代码解决如下:

<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事件时,应该先指定其父元素:

    $(function(){
$("#PaymentId").select2({
placeholder: "--请选择--",
dropdownParent: $("#myModal"),
allowClear: true
});
});

  在弹出modal里面是单选select2的时候,我遇到过无法输入的问题,这个时候,只需要把Modal上的tabindex属性删除就行了,(remove tabindex="-1" from modal)

解决select2在bootstrap的modal中默认不显示的问题的相关教程结束。

《解决select2在bootstrap的modal中默认不显示的问题.doc》

下载本文的Word格式文档,以方便收藏与打印。