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

Question

I'm using AngularJs with Angular-Material and Jquery-ui for creating a floating and draggable dialog window - i was manage to create what i want - the problem is that the md-dialog has a container div (md-dialog-container) that stretched all over頁面 - 並防止按下對話框外的任何按鈕。

我想知道如何以某種方式禁用背景，以便在對話框打開時能夠按下頁面中的任何按鈕。

我已將 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。

代碼

Answer 1

您只需設置 CSS 屬性pointer-events 。

如果您希望單擊“通過”元素，則使用的值為none 。

因此，您只需添加以下 CSS：

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

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

演示

您可以在此處閱讀有關指針事件的更多信息

Answer 2

我認為你選擇的方向不是最好的。

我想知道如何以某種方式禁用背景，以便在對話框打開時能夠按下頁面中的任何按鈕。

就像： “我想要一個有四個門的鋼箱，所以我決定買一輛汽車，拆掉輪子和發動機。”

您試圖打破對話（ Wiki ）的概念。 它旨在避免所有事件傳播 ae 在對話框外單擊，以使用戶將注意力集中在警報、警告等特定信息上。

---

...創建一個浮動和可拖動的...

你有足夠的 Angularjs 庫，可以與 div 一起使用（ position: absolute ）只需谷歌它：）