jQuery-ui Selectable在Bootstrap 3模态框中显示异常的解决咨询

你碰到的确实是z-index层级冲突导致的问题——Bootstrap 3模态框的默认层级非常高，而jQuery UI的选择辅助矩形（就是你提到的ui-selectable-helper类对应的元素）默认z-index不够，所以被模态框压在了下面。

核心解决方案：提升ui-selectable-helper的z-index #

直接修改这个类的CSS，把它的z-index设得比Bootstrap模态框更高就行：

.ui-selectable-helper {
    z-index: 1060 !important; /* 比Bootstrap模态框默认的1050高 */
    /* 保留原有样式，比如border、background这些，只调整z-index即可 */
}

为什么Angular组件里能正常运行？ #

大概率是Angular的样式隔离机制帮你规避了这个冲突——Angular组件的样式默认只作用于当前组件，在Angular环境里，模态框的z-index或者选择助手的层级被隐式调整了，而纯Bootstrap+jQuery的环境没有这个自动处理逻辑。

额外说明 #

• Bootstrap 3的.modal默认z-index是1050，.modal-backdrop是1040，所以我们把ui-selectable-helper设为1060就足够确保它在模态框上方。
• 如果你的模态框自定义了更高的z-index（比如修改了.modal的z-index），记得把ui-selectable-helper的z-index设得比这个自定义值更高。
• 加!important是为了确保这个样式能覆盖jQuery UI的默认样式，如果你的CSS加载顺序在jQuery UI之后，也可以不用!important，但保险起见加上更稳妥。

内容的提问来源于stack exchange，提问作者Trying_To_Understand