Jordan M. Baron Jordan M. Baron - 4 months ago 16
HTML Question

Bootstrap 3 modal not working on button click

I made a simple modal following a tutorial and when I click the button the modal does not show up. I tried changing

href
to
data-target
but that din't fix the problem. The code below is the modal code. I have nothing in my CSS or JavaScript file.

<a data-target="#myModal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span>Sign up for weekly newsletter</a>

<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Sign up for the newsletter</h4>
<div class=modal-body>

</div>
</div>
</div>
</div>
</div>


Here's a CodePen: http://codepen.io/jordanbaron123/pen/pbamPa

Answer

In your head you need to have the following. Also remove the bootstrap links at the bottom of your body. Looks to me like you might have been running an outdated version of bootstrap js.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Here is a Codepen as an example.

Comments