Twitter Bootstrap Modal does not appear
Solution 1
My problem was that I was including both boostrap.js and bootstrap-modal.js. Apparently if you include bootstrap.js you shouldn't also inlclude bootstrap-modal.js because boostrap.js imports all of the javascript plugins that it is compatible with. Something like that. After deleting my boostrap-modal.js script link it worked.
Solution 2
You have to call:
<script>
$('#myModal').modal('show')
</script>
After the </body>
tag. Or if you only want to call it when the user clicks on something:
$('#button_id').click(function(){
$('#myModal').modal('show')
});
Jonathan Wrona
Updated on June 09, 2022Comments
-
Jonathan Wrona about 2 years
Any modal that I am creating using twitter bootstrap fails to appear. I'm not sure what I'm doing wrong seeing that I set up a test modal using the code that bootstrap provides and it still doesn't work.
Here is my code (body only): You need to link to bootstrap.js, bootstrap-modal.js, jquery.js, and bootstrap.css
<body> <div class="modal hide" id="myModal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> × </button> <h3>Modal header</h3> </div> <div class="modal-body"> <p> Modal body would go here... </p> </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#" class="btn btn-primary">Save changes</a> </div> </div> <a data-toggle="modal" href="#myModal">Show Modal</a> </body>
And here are links to the bootstrap package and jquery that a bootstrap modal needs: bootstrap package jquery
-
Jonathan Wrona almost 12 yearsMy problem was that I was including both boostrap.js and bootstrap-modal.js. Apparently if you include bootstrap.js you shouldn't also inlclude bootstrap-modal.js because boostrap.js imports all of the javascript plugins that it is compatible with. Something like that. After deleting my boostrap-modal.js script link it worked. Thanks though!