IonicModal modal is showing only black dropdown but not html markup

Hi There

Im trying to implement ionic modal just according to the examples but its not working

more correctly when i click the button i see the black drop down and the modal object in the console is well defined, but i dont see my modal html

what am i doing wrong?

btw i tried with the exact copy paste code of the documentation

So i’ve tried to look into the modal object and compare it with fresh ionic project

i’ve noticed that it has en $el element and that in the fresh project it had value of JQlite[1] and in my other project (the non working) it had other value , this was caused by my main project loading jquery as dependency

i removed that dependency (jQuery) and the value of $el is now the same yet i still don’t see the modal html.

i expanded the $el element and its first property is a div with value modal-backdrop.hide

where as the proper working modal has a property of modal-backdrop (without the hide)

i think this might be the problem…

found the problem
link href=“css/bootstrap.min.css” rel="stylesheet"
ootstrap.min.css
im importing it because i need a calendar widget
upon removing it ionic own css setting worked

I also get this issue, remove this css worked. But if I must use that css , how can i do it?
(from China. Apologize my English level :weary: )

I had the same problem.

The .modal class in bootstrap.css sets the element on display:hidden;

So if you don’t need the modal-styles of bootstrap, simply customize your bootstrap file at Customize at getbootstrap.com and uncheck “Modals”.

That’s the way i managed to use bootstraps pagination styles and display beautiful modals of Ionic.

Regards

2 Likes

Nice solution DeeMo

This is exactly what I want… :slight_smile: