CODEWITHSUNDEEP
angular-ui-bootstrap
James
James

Reputation: 1098

Transparent modal backdrop

I'm trying to make a modal backdrop completely transparent (specifically for one modal) and I'm having a difficult time achieving this. From the docs it says I can apply a custom class with backdropClass. When I open my modal, I call:

backdropClass: 'transparent-backdrop'

But no matter what styling I put in this class (whether to achieve transparency or just change the backdrop color), the backdrop does not change. My CSS looks like this:

.transparent-backdrop {
    opacity: 0;
}

I can modify the backdrop color using windowClass (and the 'in' class):

windowClass: 'my-window-class'

.my-window-class.in {
   background-color: #000;
}

However, if I try to set the opacity in a similar way:

.my-window-class.in {
   opacity: 0;
}

my backdrop is still present, but now my modal disappears. Can anyone tell me the correct way to modify the opacity of the backdrop?

Upvotes: 0

Views: 1961

Answers (1)

Paul
Paul

Reputation: 196

This works for me:

.transparent-backdrop.in { opacity: 0; }

Here's a screenshot showing the transparent backdrop in Chrome screenshot

Upvotes: 2

Related Questions