I am trying to get a simple bootstrap's modal sample to work, I follow this document which says " You can activate modals on your page easily without having to write a single line of javascript. Just give an element a data-controls-modal attribute which corresponds to a modal element id, ...", but I have done whatever I could and had a huge amount of research still can not get this simple modal to work.

button to activate the modal, I have loaded the bootstrap-modal.js on the page as well. Unless I added a javascript line to handle the "Launch Modal" click event, when I click on "Launch Modal", nothing happens at all, are there anything that I have missed?

what js scripts are you including in your header and in which order?
–
Andres IlichMay 12 '12 at 13:29

I included js scripts before body tag rather than in the header, in the order like: <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.7.0/… type="text/javascript" src="/scripts/myApp.js"></script>,<script src="/scripts/bootstrap-modal.js"></script>, is that ok? thanks.
–
cnheraldMay 13 '12 at 8:11

If I tried the modal example on the "mainpage.html" with url is "/", it works fine just as the example on the official doc and your response. but when I loaded the same modal example onto a html page with url is "/nextpage", it then didn't work at all, unless I used a javascript line to handle the click event, any idea?
–
cnheraldMay 13 '12 at 8:15

Fiddle 2: a replica of the modal described in the bootstrap documentation,
but that incorporates the necessary elements to avoid the use of any javascript.
Note especially the inclusion of the hide class on #myModal div, and the use of data-dismiss="modal" on the Close button.

He is using the official docs, just the ones in the distro package, not the canonical site. Even on the canonical site, look at the next paragraph and you'll see the content about markup that the OP is talking about.
–
nrabinowitzMay 12 '12 at 4:07

thanks nrabinowitz, if I tried the modal example on the "mainpage.html" with url is "/", it works fine just as the example on the official doc and your response. but when I loaded the same modal example onto a html page with url is "/nextpage", it then doesn't work at all, unless I used a javascript line to handle the click event, any idea?
–
cnheraldMay 12 '12 at 9:53

is there anything to do with the path of the html (url)? in my case, mainpage.html(url is "/") and nextpage.html(url is "/nextpage") are in the same folder.
–
cnheraldMay 12 '12 at 10:00

I had an issue with Modals as well. I should have declare jquery.min.js before bootstrap.min.js (in my layout page).
From official site : "all plugins depend on jQuery (this means jQuery must be included before the plugin files)"