Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Jquery / Twitter Bootstrap

Bootstrap Modal Window Not Showing

Post a Comment
I tried today with modal windows on Bootstrap, but I have a problem. Modal won't show. I did exactly as shown in getbootstrap.com/javascript/#modals but still it isn't working. Doe

Solution 1:

Ok so all you needed to do is add jquery to your javascript libraries as you can see below is working code just copy and paste the whole thing. In the head of your document there is a script tag with a link to bootstraps js file and above it is a link to jquerys js file. Bootstrap runs off of jquery so it will not work without it. With bootstrap you always need to load jquerys js file before bootstraps js file

<html><head><!-- Bootstrap scripts --><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"crossorigin="anonymous"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"crossorigin="anonymous"><!-- Latest compiled and minified JavaScript --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"crossorigin="anonymous"></script><!-- Custom script as written on bootstrap page --><script>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
</script></head><body><!-- Button trigger modal --><buttontype="button"class="btn btn-primary btn-lg"data-toggle="modal"data-target="#myModal">
  Launch demo modal
</button><!-- Modal --><divclass="modal fade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"><divclass="modal-dialog"role="document"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">&times;</span></button><h4class="modal-title"id="myModalLabel">Modal title</h4></div><divclass="modal-body">
        ...
      </div><divclass="modal-footer"><buttontype="button"class="btn btn-default"data-dismiss="modal">Close</button><buttontype="button"class="btn btn-primary">Save changes</button></div></div></div></div></body></html>

Solution 2:

I think, you have two problems :

  • First one, as @Cory said, I think you ' ld be placed your custom javascript in the bottom of your page

  • Second one, you didn't include jquery (and don't forget to insert it before the bootstrap one)

I did a fiddle here and I add your <input id="myInput" /> into your modal and it seems to work pretty well : https://jsfiddle.net/9hxo6x88/

Hope it's help

Post a Comment for "Bootstrap Modal Window Not Showing"