addClass doesn't works for modal-backdrop

[bentzys]

given:

.my_css_stuff {
background-color: green;
}

$('.modal').addClass('my_css_stuff'); WORKS

$('.modal-backdrop').addClass('my_css_stuff''); DOESN'T WORKS

[richardp-au]

jsFiddle?

[bentzys]

http://jsfiddle.net/bentzy/ntTgX/12/

Please see the css relevant stuff at the bottom of the css pane.

Thanks!

[richardp-au]

The backdrop isn't appended to the DOM until after the show event has been triggered. Your code would work in the shown event but only if you don't use animation via the fade class (which you aren't using in your fiddle).

Alternatives would be to tweak the JS or override the CSS in the actual stylesheet. Any reason you're not doing it this way?

[bentzys]

Thanks for your help. I'm still new at front-end development :-).
I also got help at http://stackoverflow.com/questions/11240108/specific-modal-backdrop-customizing
My new working fiddle:
http://jsfiddle.net/bentzy/ntTgX/14/
Just for the record - the reason I need to this dynamically is that I want at the same page a regular modal (black backdrop) and a customized modal (transparent backdrop).
Thanks.

[richardp-au]

If you're using a transparent backdrop to effectively not have a backdrop, there's a simpler solution: set the modal's backdrop option to false (either in JS or a data attribute).

[esr360]

What is the correct solution to show a popup with a customized backdrop, please?