search

dougludlow / ng2-bs3-modal

Angular Bootstrap 3 Modal Component
http://dougludlow.github.io/ng2-bs3-modal/
ISC License
261 stars 133 forks source link

Backdrop styling per modal #253

Closed jaysonlane closed 5 years ago

jaysonlane commented 5 years ago

I've got a question:

Is it possible to style the backdrop per modal? I'm not seeing a way to do that without styling every modal. Here's my use case:

Some of my modals need a backdrop, some do not. However, I still want to be able to dismiss the modals that do not have a backdrop by click outside of them so [backdrop]="false" won't suffice. To get around this, setting the backdrop opacity to 0 works but I want a visible backdrop on other modals. Haven't found a way to do this yet.

dougludlow commented 5 years ago

Good question, how would you do this with just bootstrap?

jaysonlane commented 5 years ago

@dougludlow thanks for the quick response! I am considering adding a class to the body that indicates which modal (or modal type) is open and then styling the modal backdrop that way. The only potential "gotcha" I can see here is hooking into the modal close to remove that class.

jaysonlane commented 5 years ago

Actually, it may make more sense to just add a class to the modal-backdrop when the modal is opened. 🤔

dougludlow commented 5 years ago

I found this solution: https://stackoverflow.com/a/26248333/1110395.

I believe we expose the bootstrap modal instance.

jaysonlane commented 5 years ago

Fantastic, thanks @dougludlow. I'm actually having some success with the css-only suggestion on that same question:

.modal2.fade.in ~ .modal-backdrop.fade.in {
   background-color: #f00; 
}
dougludlow commented 5 years ago

Great!