Magnus Burton Magnus Burton - 1 year ago 112
jQuery Question

Bootstrap modal won't show up

My bootstrap (3.0.2) modal won't show up. I've tried different buttons, links and all that but it simply won't show up. I appreciate any help!

<link rel="stylesheet" href="css/bootstrap.min.css" />
<button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#purchaseModal">Purchase</button>

<div class="modal fade" id="purchaseModal" tabindex="-1" role="dialog" aria-labelledby="purchaseLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="purchaseLabel">Purchase</h4>
<div class="modal-body">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Purchase</button>

<script src=""></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src=""></script>

Here's a screenshot of the warnings in the console.

enter image description here

The button and the modal are located inside a container. Maybe this could help on your path to a solution?

Answer Source

I solved this by adding this line of JQuery to the bottom of the page;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download