Modal backdrop: static not allowing clicks without closing t

Topic: Modal backdrop: static not allowing clicks without closing the modal

Mizhas free asked 6 years ago

The tittle says it all. Regarding documentation https://mdbootstrap.com/angular/advanced/modals/#options Type: 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?

Add comment

vk-web free answered 4 years ago

0 0 Best answer

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

Add comment

Mizhas free answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Ok, maybe I was wrong about what 'static' should be doing. Let me explain my problem again: I want the modal to act as a popup which does not close automatically either interrupts the normal behaviour of the website. Basically, I want a little 'window' to show some extra information which does not prevent the user to interact with the website. Your website has it all around but it seems to be jquery based to I need some help with the angular way of achieving this. I have tried [config]={backdrop: false, ignoreBackdropClick: true} so far but even if it removes the backdrop and prevents the closing, I am not allowed to interact with the forms behind the backdrop for example. I hope the issue its a little more clear now.

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 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, Damian

igor romanovsky free commented 6 years ago

Hi. Is there any solution to this issue, I tried the css workaround, But it didnt worked    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></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></div> <div><divclass="modal-content"></div> <div></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></div> <div></div></div> <div></div></div> <div></div> </div>   div.modal.fade.bottom { z-index: -1 !important; }

Hi. Is there any solution to this issue, I tried the css workaround, But it didnt worked

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></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></div>
<div><divclass="modal-content"></div>
<div></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></div>
<div></div></div>
<div></div></div>
<div></div>
</div>

div.modal.fade.bottom {
z-index: -1 !important;
}

Please insert min. 15 characters.

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

Add comment

Damian Gemza staff answered 6 years ago

1 0 Best answer

Dear Mizhas,
Please add below code to the element which contains mdbModal directive.
<div>
<pre>[config]="{backdrop: 'static'}"</pre>
</div>
The whole code looks like below:
<div>
<pre><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">

</button>

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

</div>

...

</div>

<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></pre>
</div>
Best Regards,

Damian

Please insert min. 20 characters.

Dear Mizhas, Please add below code to the element which contains mdbModal directive.

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

The whole code looks like below:

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

Best Regards, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

Mizhas

10Support score
1Questions 1Answers 0Snippets