Enable actions like click, selecting etc… outside modal window in Angular

Question

I have created custom dialog box in Angular. The current behavior of dialog box is that user can only click on the buttons which is inside the dialog box.

dialog-box.component.html

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

dialog-box.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 ) and the button which is outside the dialog box ( Click Me button) 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

Understand the root cause of the problem -

You have added a div with class .modal which is absolutely positioned, and acquire the full screen space. On the top of it, your actual modal-body exists. But since .modal div acquires the full screen space, it prevents all the elements below the modal to be clicked. That is why when you try to click the click me button outside the modal, modal is actually getting clicked and not the button.

See, when you hover on the modal div in elements panel, you will be able to see the full blue screen.

Solution -

This can be fixed with the help of CSS only. Replace your dialog-box.component.scss with this code and give it a try!

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

}

Read more about thepointer events from here.