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

}

从这里阅读更多关于指针事件的信息。