Doe Doe - 3 months ago 8
CSS Question

Bootstrap button can't call a modal

I have inserted a modal inside my html code and I created a bootstrap button (since I'm using bootstrap) to call the modal.
The problem is that my model doesn't show up when I click at the button.
Here is my code:



<!-- Modal -->
<div id="ordine" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Ordine inviato!</h4>
</div>
<div class="modal-body">
<p>I vostri ordini saranno evasi in ordine cronologico di arrivo. Riceverete, una volta che abbiamo controllato la disponibilità fisica in magazzino, una mail di conferma e, successivamente, una seconda mail di avviso della partenza del pacco.</p>
<p>Grazie per aver scelto Mailmodel !</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>





Here is my button:



<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="address">
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#ordine">Invia ordine</button>
</div>
</div>
<div class="col-md-2"></div>
</div>





Have I done smth wrong in my code? Can someone help me to fix this?

Answer

You need to include this in your head section:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

for your code to work.