bootstrap modal与select2使用冲突解决

今天发现项目使用bootstrap modal 与 jquery select2 结合时发现select2不起作用,点击select框不显示选项,查阅资料后发现是因为modal层遮挡了select2的选择层

下面是解决方案(亲测),分两步

1. select2 加入 dropdownParent 属性,设置父元素modal

$(".select2-demo").select2({
dropdownParent:$("#Modal-demo")
});

2. css设置 让select2的选择弹出层位于最上层,否则将被modal遮挡住

bootstrap modal与select2使用冲突解决
.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;
}
bootstrap modal与select2使用冲突解决
上一篇:软件案例分析——VS、VS Code


下一篇:当函数没有return时错误