CODEWITHSUNDEEP
javascriptcssangulartypescript
Asif Zaidi
Asif Zaidi

Reputation: 93

How to enable click outside dialog box

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.

enter image description here

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

Upvotes: 2

Views: 1318

Answers (2)

Alex Voloshyn
Alex Voloshyn

Reputation: 176

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")

Upvotes: 2

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

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

Upvotes: 1

Related Questions