Magnus Burton Magnus Burton - 5 months ago 24
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!

<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<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>
<div class="modal-body">
sup?
</div>
<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>
</div>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>


UPDATE 1:
Here's a screenshot of the warnings in the console.

enter image description here

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

Answer

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

<script>
    $("[data-toggle='modal']").modal();
</script>