在 Angular 中啟用諸如單擊、選擇等操作...

Question

我在 Angular 中創建了自定義對話框。 對話框的當前行為是用戶只能單擊對話框內的按鈕。

對話框.component.html

<div class="modal">
<div class="modal-body">
    <ng-template #content></ng-template>
</div>

對話框.component.css

.modal {
    display: block;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  .modal-body{
    position: relative;
    padding: 10px;
    border: 1px solid;
    width: 50%;
    min-width: 50%;
    top: 100px;
    left: 0px;
  }

我想實現一種行為，我想在對話框外啟用點擊：

1. 對話框內的按鈕（關閉按鈕）和對話框外的按鈕（單擊我按鈕）可單擊。

2. 鏈接（單擊此處打開新模式）可單擊，位於對話框之外

我想要一個通用的解決方案，它應該適用於對話框內外的每次點擊（按鈕、鏈接、文本等）。 請幫助我。

Stackblitz 演示： https://stackblitz.com/edit/dialog-box-overlay

Answer 1

了解問題的根本原因——

您添加了一個絕對定位的帶有 class .modal的 div，並獲得了全屏空間。 最重要的是，您的實際模態體存在。 但是由於.modal div 獲得了全屏空間，它阻止了模態下方的所有元素被點擊。 這就是為什么當您嘗試單擊模態外部的click me按鈕時，實際上是單擊模態而不是按鈕。

看，當您在元素面板中的模態 div 上 hover 時，您將能夠看到整個藍屏。

解決方案 -

這只能在 CSS 的幫助下修復。 用此代碼替換您的dialog-box.component.scss並試一試！

.dialog-modal {
  padding: 1%;

  .modal {
    pointer-events: none;
    display: block;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  .modal-body {
    pointer-events: all;
    background-color: grey;
    position: relative;
    padding: 10px;
    border: 1px solid;
    width: 50%;
    height: 50%;
    min-width: 50%;
    top: 100px;
    left: 50px;
  }

}

從這里閱讀更多關於指針事件的信息。