Modal backdrop: static not allowing clicks without closing t

[config]="{backdrop: 'static'}"

<button type="button" mdbBtn color="primary" class="relative waves-light" (click)="basicModal.show()" mdbWavesEffect>Launch demo modal</button>

<div mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" [config]="{backdrop: 'static'}"

aria-hidden="true">

<div class="modal-dialog"role="document">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">

<span aria-hidden="true">×</span>

</button>

<h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>

</div>

<div class="modal-body">

...

</div>

<div class="modal-footer">

<button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()"mdbWavesEffect>Close</button>

<button type="button" mdbBtn color="primary"class="relative waves-light"mdbWavesEffect>Save changes</button>

</div>

</div>

</div>

</div>

Damian Gemza staff commented 6 years ago

There's no possibility because modal is always on top. He has an underlying layer that blocks your interaction with the elements behind it. But you can overwrite that default behavior with below css code. Check my workaround, and let me know if it fits your needs. But I can't guarantee you if this solution will work for 100% chances. div.modal.fade.in.show { z-index: -1 !important; } Best Regards, Damian

---

Mizhas commented 6 years ago

So it is not possible because of Angular? I mean, if you go here: https://mdbootstrap.com/javascript/modals/ and use the side modal demo buttons you will see that you can still interact with the buttons even if one modal is open so the question is, why is not possible to do this in angular?

---

iakin pro commented 6 years ago

hi, I face the same problem, let us know if you find a working solution :-)

---

Damian Gemza staff commented 6 years ago

We'll try to fix this and let you know when it will be done. As for now, please try to use my workaround from the first comment. Best Regards, Damian

---

igor romanovsky commented 6 years ago

Hi. Is there any solution to this issue, I tried the css workaround, But it didnt worked <!-- Frame Modal Bottom Success--> <!--Content--> <!--Body--> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos.. <div> <div><button type="button" mdbBtn color="primary" class="relative waves-light" (click)="basicModal.show()" mdbWavesEffect>Launch demo modal</button></div> <div><!-- Frame Modal Bottom Success--></div> <div><div mdbModal #basicModal="mdb-modal" class="modal fade bottom" id="modal" tabindex="-1" role="dialog" id="modal" [config]="{backdrop: 'static'}" aria-labelledby="myBasicModalLabel"</div> <div>aria-hidden="true"></div> <div><div class="modal-dialog modal-frame modal-bottom" role="document"></div> <div><!--Content--></div> <div><divclass="modal-content"></div> <div><!--Body--></div> <div><divclass="modal-body"></div> <div><divclass="row d-flex justify-content-center align-items-center"></div> <div><pclass="pt-3 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit</div> <div>nostrum quos..</p></div> <div><atype="button"class="btn btn-success">Get it now</div> <div><iclass="fa fa-diamond ml-1"></i></div> <div></a></div> <div><atype="button"class="btn btn-outline-success waves-effect"data-dismiss="modal">No, thanks</a></div> <div></div></div> <div></div></div> <div></div></div> <div><!--/.Content--></div> <div></div></div> <div></div></div> <div><!-- Frame Modal Bottom Success--></div> </div> <!--/.Content--> <!-- Frame Modal Bottom Success--> div.modal.fade.bottom { z-index: -1 !important; }

---

Arkadiusz Idzikowski staff commented 6 years ago

Dear igor romanovsky, If you have the same problem as Mizhas mentioned, then unfortunately there is no workaround for now. We need to fix something in the component. Best, Arek

---

Gezim Gashi commented 5 years ago

Still no solution for this?

---

Konrad Stępień staff commented 5 years ago

Hi @Gezim Gashi, Could you make a new support post? Because this post has 2 years old. And a lot has changed since then, and I need more information about your project for help you.

---

Nate commented 4 years ago

Has there been any progress on this? Its been 2 years, surely this must be fixed by now...

---

Arkadiusz Idzikowski staff commented 4 years ago

@Nate
To achieve this kind of functionality, you can use the cookie modal and set the ignoreBackdropClick to false.

https://mdbootstrap.com/docs/angular/modals/additional/#modalCookiesSec

---