html - Displaying bootstrap custom modal -
problem description
i have 2 views. first 1 contains link, when clicked, should display second view custom modal. both files in same folder called school.
code
firstview.html
<html> <head>click link</head> <body> <div> <a data-toggle="modal" href="secondview.html" data-target="#secondview" >additional details</a> </div> </body> </html> secondview.html
<!-- modal --> <div id="secondview" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="mymodallabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="mymodallabel">modal header</h3> </div> <div class="modal-body"> <p>one fine body…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">close</button> <button class="btn btn-primary">save changes</button> </div>
</div> issue @ hand
the problem when click on link, not display anything. checked console, , not display errors. so, thinking has way connect these 2 views, href tag.
i appreciate folks.
from http://twitter.github.com/bootstrap/javascript.html#modals:
if remote url provided, content loaded via jquery's load method , injected .modal-body.
so you'd
firstview.html
<html> <head>click link</head> <body> <div> <a data-toggle="modal" href="secondview.html" data-target="#mymodal" >additional details</a> </div> <!-- modal --> <div id="mymodal" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="mymodallabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="mymodallabel">modal header</h3> </div> <div class="modal-body"> <!-- here modal content --> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">close</button> <button class="btn btn-primary">save changes</button> </div> </div> </body> </html> secondview.html
<p>one fine body…</p> 
Comments
Post a Comment