I have this simple modal form done with Bootstap 3, and I have no clue why it's not appearing when I click on the button.
<div id="modal" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Some title</h3>
</div>
<div class="modal-body">
<form id="modal-form" accept-charset="UTF-8" action="/mailing" data-remote="true" method="post">
<label>Name:</label>
<input type="text" class="span6">
<label>Email:</label>
<input type="text" class="span6">
<label>Message:</label>
<textarea type="text" class="span12" rows="4"></textarea>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success">Send</a>
<a href="#" class="btn" data-dismiss="modal">Cancel</a>
</div>
</div>
And this is the button that should make this modal window appear when clicked:
<p class="text-center">
<a data-toggle="modal" href="#modal" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-envelope"></span>
Message me
</a>
</p>
It is not much different to the example codes I've seen around the web, but I can't make the modal window to appear.
Any idea why it's not working?
Edit:
This is how I'm including the Bootstrap JS files:
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
Try removing the class hide
from the modal div:<div id="modal" class="modal fade in" style="display: none;">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With