Prevent modal from shut down

Hi folks, happy holidays.
How can I prevent a modal from closing when you click outside the modal.
It should only shut down when you click on the close button.
I searched the forum but couldn’t find an answer.

This should help you:

EDIT: When using BS5 you’ll need to add -bs- as described here:
Modal · Bootstrap v5.1

Tank you Jerry, but it doesn’t work.
I even tried with a new project - no success.
But thanks anyway

I don’t know what kind of Modal you have, but you could use Toggle Class interaction instead of modal to get something like that.

1 Like

Seems like Blocs puts the Custom Attribute on the modal content Div, which is not ideal, if you want to add attributes. (The backdrop static attribute needs to go on the main modal Div.).

I am sure this wasnt the case previously, I could be wrong. Maybe @Norm can address this. Or add the Static and keyboard options to the Modal.

Anyway, in the mean time you could use js to add the attribute to the right DIV, it would be something like this…

window.addEventListener('load', (event) => {
  modal = document.querySelector('.modal');
  modal.setAttribute('data-bs-backdrop', 'static');

Note: If you are using BS4, replace   data-bs-backdrop  with  data-backdrop


It still is working when using BS4. It slipped in when upgrading to BS5.
Kapture 2021-12-27 at 06.47.25

1 Like

Thanks for that code but I can’t get it to work.
Where should I implement it and do I have to adjust it?

Norm I think this could be a nice feature for the upcoming Blocs versions.

Just add it to your page header.

No adjustments are needed.

I did with no luck.
It works with BS4 (data-backdrop) but doesn’t with BS5 (data-bs-backdrop).

Correction: I just tried with a new project and it works

Page footer would be tidier.

Yeah, on an empty file it doesn’t really matter :grin:

1 Like

I’ll give it a try on an old project.

It’s in the official BS Docs.

Seems like migrated projects are problematic with this for some reason??

That’s right.
The funny thing is, that some modals work like they should and some don’t.

I can confirm. On a migrated project it didn’t work for me but on a new project, it did. @Norm?


@Norm ,
Any progress on that issue?

I tested this, because it might be a handy feature on future projects. In a new project I used Cadence to open the modal at page load. It worked very well with the standard modal. But it doesn’t work with the modal-designer modal.

Works for me with Modal Designer. Only when you click outside the modal it removed the .modal-backdrop. That seems to be something @Whittfield has as part of the code. The modal remains shown though.

Cadence or modal designer is not the issue here.
The issue is preventing a modal from close by clicking outside the modal.

Unfortunatly the code shown further above doesn’t work with older projects converted to BS5.
@Norm ?