与 Bootstrap 模态一起使用时显示在模态后面的 Angular ui-select 选项

Posted 2023-03-06

【中文标题】与 Bootstrap 模态一起使用时显示在模态后面的 Angular ui-select 选项

【英文标题】：Angular ui-select options showing behind the modal when used with Bootstrap modal

【发布时间】：2016-09-19 09:28:51

【问题描述】：

我面临 Angular ui-select 的问题（替换 html 选择）。我添加了选项append-to-body，以便它可以显示在其他元素之上。

但是我面临一个问题，当它在引导模式之上使用时，它不显示选项列表。实际上，它显示选项列表显示在模态后面，如您在图像中看到的那样。

有没有解决这个问题的方法？

【参考方案1】：

只需为ui-select元素的父元素添加一个大于1050的z-index CSS属性即可。

为什么要大于 1050？

因为.modal类上的z-index被设置为1050所以我们需要提供下拉的父元素更高的z-index，这样它才能出现在z轴模态的上方。

【讨论】：

你好我正在使用 ui-select 的包装器，因此 z-index 属性被添加到所有 ui-select 组件中，在我的应用程序中，我刚刚意识到这会导致副作用。现在，当我打开任何模式弹出窗口时，它会在页面上显示模式顶部的组合框。有什么解决办法吗？

你能提供一个 plunkr/fiddle 或 SO sn-p 吗？

【参考方案2】：

我遇到了同样的问题，在我的情况下，我在 ui-select 指令中使用了 append-to-body="true"。将此设置为 false 为我修复了它。