在 Angular 的模态窗口之外启用诸如单击、选择等操作答案

【问题标题】：Enable actions like click, selecting etc... outside modal window in Angular在 Angular 的模态窗口之外启用诸如单击、选择等操作
【发布时间】：2020-04-15 12:41:34
【问题描述】：

我在 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;
  }

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

对话框内的按钮（关闭按钮）和对话框外的按钮（单击我按钮）可单击。
对话框外的链接（点击此处打开新模式）可点击

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

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

【问题讨论】：

标签： javascript css angular typescript

【解决方案1】：

了解问题的根本原因 -

您添加了一个绝对定位的类.modal 的div，并获得了全屏空间。最重要的是，您的实际模态体存在。但是由于.modal div 获得了全屏空间，它阻止了模态下方的所有元素被点击。这就是为什么当您尝试单击模态框外的click me 按钮时，实际上是模态框而不是按钮被单击。

看，当您将鼠标悬停在元素面板中的模态 div 上时，您将能够看到整个蓝屏。

解决方案 -

这只能在 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;
  }

}

阅读更多关于pointer events from here.

【讨论】：