Emily Serven Emily Serven - 27 days ago 14
Javascript Question

Bootstrap UI Angular modal doesn't show as a pop up

What I have: https://rawgit.com/emilyeserven/testwebsites/master/js/angular/chara-select/index.html

At the bottom are buttons to open modal boxes. However, when they're clicked, they just show at the top without more than the bootstrap button styling.

The current modal code is adapted from the Bootstrap UI demo site (I only changed the name of the app module). The unmodified code was tested the code in a sandbox on MAMP, so I know that works. I'm not sure where the problem is coming from exactly, since the console isn't showing any out-of-the-ordinary errors.

Any directly modal-related HTML code is at the bottom of

index.html
. Likewise, any directly modal-related JS is in
js/modal.js
.

GitHub Repository: https://github.com/emilyeserven/testwebsites/tree/master/js/angular/chara-select

Any help in pointing me in the right direction would be greatly appreciated!

Answer

As far as I can see, you are using a custom build of bootstrap. The bootstrap.css that you are using does not contain styles for modals. Try to load https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css instead of your bootstrap.css and will work.