如何启用在对话框外部单击

Question

I have a running Angular 9 application and I have created custom dialog box. As of now, once the dialog box opens, I can only click on the buttons which is inside the dialog box.

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

I want to achieve a behavior in which I want to enable click outside the dialog box:

1. Button which is inside the dialog box ( Close button in the below image) and the button which is outside the dialog box ( Click Me button in the below image) to be clickable.

2. Links ( Click Here to Open New Modal ) to be clickable which is outside dialog box

I want a generic solution which should work for every click( button, links, texts etc..) outside and inside dialog box. Please help me on this.

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

Answer 1

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

By using css you can add z-index to the button to make the button come above the backdrop and make it clickable:

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

Answer 2

The reason why click outside don't work now is because div class="modal" works as overlay for application. If you don't want to change current html, you can use css solution for this:

Add pointer-events: none; style for modal backdrop (it's your div class="modal" )

Add pointer-events: auto; for modal itselt (it's your div class="modal-body" )