javascript - 如何启用在对话框外单击

Question

我有一个正在运行的 Angular 9 应用程序，并且创建了自定义对话框。截至目前，一旦对话框打开，我只能单击对话框内的按钮。

对话框.component.html

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

对话框组件.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;
  }

我想实现一种行为，我想在对话框外启用单击:

对话框内的按钮 (下图中的关闭按钮)和 对话框外的按钮 (点击下图中的我按钮)可点击。

链接( 单击此处打开新模式 )可单击，位于对话框之外

我想要一个通用的解决方案，它应该适用于对话框内外的每次点击(按钮、链接、文本等)。请帮我解决这个问题。



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

Answer 1

现在点击外面不行的原因是因为div class="modal"用作应用程序的叠加层。如果您不想更改当前的 html，可以为此使用 css 解决方案:

添加 pointer-events: none;模态背景的样式(这是您的 div class="modal")

添加 pointer-events: auto;对于 modal itelt(这是你的 div class="modal-body")