Topic: Modal backdrop: static not allowing clicks without closing the modal
boolean | "static"
Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
Any solution for this?
In my case I was able to make a workaround by using this config settings
config: { backdrop: false, ignoreBackdropClick: true, class: 'modal-lg modal-full-height modal-right w-100', containerClass: 'right w-50 fixed-right shadow', }
with just one adjustment, in css file by adding
.fixed-right { position: fixed; right: 0px; left: auto;}
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, DamianMizhas free 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, Damianigor romanovsky free 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, ArekGezim Gashi free commented 4 years ago
Still no solution for this?
Konrad Stępień staff commented 4 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 free 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
[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>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No