Javascript 如何启用“单击外部”对话框

我有一个运行的Angular 9应用程序，并创建了自定义对话框。现在，一旦对话框打开，我只能单击对话框中的按钮

dialog.component.html

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

我希望实现一种行为，在该行为中，我希望在对话框外启用单击：

对话框内部的按钮（下图中的“关闭”按钮）和对话框外部的按钮（下图中的“单击我”按钮）可单击

可单击的链接（单击此处打开新模式（）位于对话框外部

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

Stackblitz演示：

通过使用css，您可以向按钮添加

z-index

，使按钮位于背景上方并可单击：

.btn {
  position:absolute;
  bottom:0;
  z-index: 2;
}

---

单击“外部现在不工作”的原因是

div class=“modal”

用作应用程序的覆盖。如果不想更改当前html，可以使用css解决方案：

添加

指针事件：无样式（这是您的
div class=“model”
）

添加
指针事件：自动
对于modal itselt（它是您的
div class=“modal body”
）
如果您关闭它，并使按钮的z索引级别与modalI相同，尝试将按钮的z索引设置为与modal相同，但是它不起作用你可以创建stackblitzStackblitz演示：我添加了答案@asif905I更新了我的问题，为所有点击（按钮、文本、链接等）提供通用解决方案。你能帮我一下吗。提前感谢。我添加了stackblitz示例
.btn {
  position:absolute;
  bottom:0;
  z-index: 2;
}