Magnus Burton Magnus Burton - 2 months ago 9
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>
Comments