Added animation when modal backdrop is static

[anjoshigor]

The problem

When the modal backdrop is static, it should not hide when user clicks outside it or press escape key. But the current behavior wasn't in agreement with this requisite.

more info on issue #26704

The solution

• When the event KEYDOWN_DISMISS is fired, the static property is verified and another event HIDE_PREVENTED is fired.
• The event, if not prevented, is handled and a 1.2 scale transition is performed.
• If anyone wants to ovewrite this behavior, he/she should listen to the new HIDE_PREVENTED event and handle it accordingly.

Evidence

Any doubts and suggestion, please contact! 🤘

P.S: I'm planning to update doc in another PR.

Preview: https://deploy-preview-29516--twbs-bootstrap.netlify.com/docs/4.3/components/modal/#static-backdrop

[MartijnCuppens]

Hi @anjoshigor,

Thanks for this contribution. I think we better add an example of this behaviour to our docs, just to make it clearer.

I would also make the classname less attached to the appearance. Something like "highlighted" or "focused" would be more appropriate, although those names aren't perfect yet. Open for suggestions here.

[XhmikosR]

We definitely need the docs updated in this PR.

[Johann-S]

Thanks @anjoshigor for your work 👍

Just one comment to fix, and yes we need the docs in this PR 😄

[rohit2sharma95]

@MartijnCuppens What about if the class name would be static or modal-static. Because the class is only added when the modal is static. I am just getting inspiration from the class modal-open that is added in the body, when the modal is open.

[MartijnCuppens]

.modal-static would be better, thanks for the suggestion @rohit2sharma95!

[florianlacreuse]

Thanks @anjoshigor, that was a feature asked by many people (including me)!

From what I see through the gif, clicking inside the modal will trigger the hide prevented animation? It seems weird to me at first sight. I would expect to have the animation only if I click in the modal backdrop area.

[anjoshigor]

@florianlacreuse actually, the gif is kind of misleading. When the cursor is inside the modal, I press escape and that's why the animation is triggered 😅

@MartijnCuppens @rohit2sharma95 I'll use modal-static as classname 👍

@XhmikosR @Johann-S I'll add an explanation to the docs, thanks!

[florianlacreuse]

@anjoshigor Oh ok, good then! Thanks for your work.

[XhmikosR]

@Johann-S shouldn't we backport this to v4-dev?

[Johann-S]

Yep I think we can do that 👍

[XhmikosR]

It won't apply clean probably, and we need to change any Hugo specific code to Jekyll, but it's doable. Feel free to approve and we tackle the backport in another PR.

[Johann-S]

Can you remove the JS comments? The code is pretty clear here 👍
And it'll be good for your PR

[XhmikosR]

@anjoshigor can you take care of the above comments please?

[anjoshigor]

@XhmikosR just pushed some changes. You can take a look to see if it fulfils all requirements

[XhmikosR]

/CC @MartijnCuppens @mdo

[mdo]

Seems cool!