(bootstrap) modal does not show -
i learning make basic modal shows on click of link. can explain me why code below not work? upon clicking, nothing happens.
also, have include bootstrap css in head? notice when not included, modal not hidden. if include it, overwrites web page css.
here fiddle link: https://fiddle.jshell.net/skljx4cy/#&togetherjs=m9br7ehjae
and code:
<!doctype html> <html dir="ltr" lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script> function loadmodal() { $('#settingsmodal').modal('show'); } </script> </head> <body> <div style="margin-left:10px; margin-top:10px;" id="setting_websearch"> <a href="" onclick="loadmodal()">web search settings</a><br> <div style="margin-left: 25px; margin-top: 10px; font-size:small;">advanced users only. </div> </div> <div id="log"></div> <div class="modal fade" id="settingsmodal" role="dialog"> <div class="modal-dialog"> <!-- modal content--> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">modal header</h4> </div> <div class="modal-body"> <p>some text in modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> </div> </div> </div> </div> </body> </html>
ok, problem seems link target. when changed
<a href="" onclick="loadmodal()">
to
<a href="#" onclick="loadmodal()">
it works
although i'd appreciate suggestions on why so.
thanks
Comments
Post a Comment