CODEWITHSUNDEEP
javascripttwitter-bootstrap
Kerry
Kerry

Reputation: 217

Bootstrap Modal fade woes

I recently updated our Bootstrap plugins file to version 2.2.1 (the concatenated version offering all plugins).

Swapped over all old data-* api references for the modals as we'd been using 1.4 - everything was hunky dorey. Something we'd never been using was the animations, offered with the 'fade' class.

So today I wanted to pop the animations on, can anyone explain why adding the fade class not only breaks the modal entirely (displays the backdrop, but the modal itself is never set to display) but also makes the 'trigger' event handler not work?

I have a fiddle here showing the problem. It's happening cross-browser, so I know the errors on my side somewhere. fade removed - all good, fade on - broken :(

The styles seem fine? The markup is as I've always used and the minified plugin source was updated as I say very recently.

Can anyone help before I spend even longer down a rabbit hole for what I hope is a silly oversight :)

Upvotes: 2

Views: 229

Answers (1)

Kerry
Kerry

Reputation: 217

Solved now. It was my own fault, I'd overlooked the actual 'component animations' CSS that needs adding.

It took me a while to get there debugging wise, but in the end I saw that the backdrop method callback wasn't being executed from here doAnimate ? this.$backdrop.one($.support.transition.end, callback) : callback().

The reason the callback was never executed is obvious now - missing CSS classes therefore no transitions were applied, therefore no transition end event to hook on to. So the backdrop element was getting it's in class applied, but never the actual modal as the callback was never reached, and that's also why the 'trigger' seemed to stop working - there was just a big backdrop positioned over the top but opacity set to 0.

Ah it all seems so silly now :)

Upvotes: 1

Related Questions