UI-Bootstrap 仅将模态背景应用于元素

Posted 2023-03-06

【中文标题】UI-Bootstrap 仅将模态背景应用于元素

【英文标题】：UI-Bootstrap only apply modal backdrop to element

【发布时间】：2016-08-29 17:12:25

【问题描述】：

我的应用程序在div 内显示了一个 UI-Bootstrap 模态，在它上方有导航栏，通常当我启动模态时，整个背景都应用了背景（调光器），我的模态未附加到 @987654323 @ 而不是div 像这样（模态选项）：

appendTo: angular.element(document.querySelector("#mainContent")),
backdrop: true,

plunker

#mainContent 位于 DOM 下方的几层，但整个视口都被背景暗淡了。有没有办法将背景（甚至整个模态组件）仅应用于 1 个元素而不是整个视口？

【问题讨论】：

不确定它是如何设计的，但由于背景只是另一个 div - 你可以用任何你喜欢的方式修改它的 css

【参考方案1】：

您必须将背景的 CSS 部分更改为此，它只会覆盖第一个没有 position:absolute 的父容器

.modal-backdrop 
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1040;
    background-color: #000;

我已经添加到plunker

【讨论】：

它适用于 plunker，但不适用于我需要它的地方，我有点希望将它应用到 div 没有任何限制

这个原则应该适用于任何地方，你只需要适应你的代码

是的，当然，你是对的。尽管值得一提的是.modal-backdrop 会覆盖所有其他模态样式，但它应该命名为其他名称并与backdropClass 一起使用！！