angular bootstrap 模式禁用背景

Question

如何禁用 angular bootstrap 模态背景中的背景？

我试过css隐藏模态框的外部容器：

.modal {
     display: none; 
}

但这最终隐藏了模态本身。即使我覆盖了实际的模式。

我的问题是我需要能够在模式中单击 fg 上的文本并与之交互。例如。我想将一个项目拖到 bootstrap 模态内并拖到 angular bootstrap 模态外的前景中。

有人有什么想法吗？

我正在使用标准 angular bootstrap 模态标记：

<ui-tabset>
    <ui-tab>Tab 1</ui-tab>
    <ui-tab>Tab 2</ui-tab>
</ui-tabset>

Answer 1

实例化modal时有一个backdrop参数：

var modalInstance = $uibModal.open({
    backdrop: false,
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    resolve: { ... }
}

此外，可以使用 backdropClass 参数为背景指定一个 class，如果 backdrop: false 不够，您可以覆盖错误 css满足您的需求。

默认背景 class 是 modal-backdrop，它占据了整个 window 和：

top: 0;
right: 0;
bottom: 0;
left: 0;

modal class 应用了相同的样式，它会影响页面上的位置以及与 non-modal 元素的交互。

angular bootstrap 模式禁用背景

angular bootstrap modal disable backdrop

angular-ui

angular-bootstrap