如何完全删除 md-dialog 的背景？

Question

我正在使用 AngularJs 与 Angular-Material 和 Jquery-ui 来创建一个浮动和可拖动的对话框窗口 - 我设法创建了我想要的 - 问题是 md-dialog 有一个容器 div (md-dialog -容器）在整个页面上伸展 - 并防止按下对话框外的任何按钮。

我想知道如何以某种方式禁用背景，以便在对话框打开时能够按下页面中的任何按钮。

我已将 md-dialog 'hasBackdrop' 选项设置为 false - 我想这还不够。

let dialogOptionsObj = {
  controller: 'DialogController',
  templateUrl: 'dialog-tpl.html',
  parent: angular.element(document.body),
  panelClass: 'myClass',
  hasBackdrop: false, // this is what cancels the gray background
  autoWrap: false,
  clickOutsideToClose: false,
  preserveScope: true,
  fullscreen: false,
};

我发现如果 md-dialog 容器被完全删除（md-dialog-container）并且 md-dialog 直接附加到 document.body 那么它正在工作 - 我正在寻找一个更好的解决方案，因为我希望它尽可能少用 Jquery。

Code

Answer 1

您只需设置 CSS 属性 pointer-events。

如果您希望点击“通过”元素，则使用的值为none。

所以你只需要添加以下 CSS ：

.dialog-basic-size{
   pointer-events: auto;
}

.md-dialog-container , .md-scroll-mask {
  pointer-events: none;
}

Demo

你可以阅读更多关于指针事件here

Answer 2

我认为你选择的方向不是最好的。

我想知道如何以某种方式禁用背景，以便在对话框打开时能够按下页面中的任何按钮。

就像：“我想要一个有四个门的钢箱，所以我决定买一辆汽车，拆掉车轮和发动机。”

你试图打破对话的概念（Wiki）。它旨在避免所有事件传播 a.e.在对话框外单击以使用户关注特定信息，例如警报、警告等。

---

...创建一个浮动和可拖动的...

你有足够的 Angularjs 库，可以使用 div (position: absolute) 只需 google 一下 :)