Как включить клик за пределами диалогового окна

Question

У меня запущено приложение Angular 9, и я создал собственное диалоговое окно. На данный момент, когда диалоговое окно открывается, я могу нажимать только те кнопки, которые находятся внутри диалогового окна.

dialog.component. html

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

dialog.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. Кнопка, которая находится внутри диалогового окна ( Кнопка закрытия на изображении ниже) и кнопка , которая находится за пределами диалогового окна ( Click Me button на изображении ниже) для щелчка.

2. Ссылки ( Нажмите здесь, чтобы открыть новый модальный ) для щелчка, который находится вне диалогового окна

Я хочу универсальное c решение, которое должно работать для каждого клика (кнопки, ссылки, тексты и т. Д. c ..) вне и внутри диалогового окна. Пожалуйста, помогите мне в этом.

Демонстрация Stackblitz: https://stackblitz.com/edit/dialog-box-overlay

Answer 1

Причина, по которой щелчок снаружи не работает сейчас, заключается в том, что div class="modal" работает как наложение для приложения. Если вы не хотите изменять текущий html, вы можете использовать для этого решение css:

Добавить стиль pointer-events: none; для модального фона (это ваш div class="modal")

Добавьте pointer-events: auto; к для модального itselt (это ваш div class="modal-body")

Answer 2

https://stackblitz.com/edit/dialog-box-overlay-fphmxb

Используя css, вы можете добавить z-index к кнопке, чтобы кнопка стала выше фона и сделала ее кликабельной:

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