Using modal from UI Bootstrap


#1

Has anyone gotten a modal window from ui.bootstrap to work? I’m currently porting over my project that heavily used Bootstrap, and UI Bootstrap for the Angular directives. I’d rather use that than the Ionic one because it fits my project better. When trying to call $modal.open(...) I just get the dimmed blanket, and the actual modal doesn’t display. I can see it in the DOM however, so I’m thinking that this could be Ionic and Bootstrap not playing nice together?

I’d like to still use some small pieces from Bootstrap and UI Bootstrap, so if anyone has any tips on getting them to play nicely with Ionic that would be great as well.


#2

I ported my app that was previously using modal to ionic, and IIRC I ran into issues trying to use my existing modal because both Ionic and UI Bootstrap used the “modal” css class and things got all weird.

UI Bootstrap’s modal was weird and finicky anyways, so I was happy to just replace it with the much simpler Ionic one. :smile:

I’m sure there’s a way to make the css happy by overriding it some, but I don’t have specifics on how you would do it…


#3

Yeah I’ll try playing around with the classes applied to the modal and see what I can come up with.

In the meantime, the Ionic modal isn’t all that bad I guess haha… I liked the ability to just show a small popup and see behind it, rather than taking up the whole screen.

Does anyone know why the Ionic modal doesn’t animate using the slide-in-up animation on Android? It appears to work fine in Chrome (desktop browser) and iOS. Just fades in on Android.


#4

I am running into the same issue here, did you ever find a work around?

what specific class is it or do I just need to give up on bootstrap?


#5

@aaronksaunders I did get it to show finally by renaming the modal template classes. I just copied the classes it was using to a new file, renamed the classes and used those instead of the bootstrap ones (I may have modified some CSS too, but I can’t remember). Also, I believe there is a new centered popup modal in ionic that you can use instead of the full screen one so you might try looking into that.

Hope that helps.


#6

I am having the same issue here, just getting a grey background but no modal. No 404’s and I can also see the model in the DOM.