Top
Home

Bootstrap Modal

Bootstrap Pop-Ups



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



<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal01">Open Large Modal</button>
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal02">Open Large Modal 2</button>
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal03">Open Large Modal 3</button>

<!-- Modal -->
<div class="modal fade" id="myModal01" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>This is a large modal.</p>
</div>
</div>
</div>
</div>



<div class="modal fade" id="myModal02" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header 02</h4>
</div>
<div class="modal-body">
<p>This is a large modal 02.</p>
</div>
</div>
</div>
</div>



<div class="modal fade" id="myModal03" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header 03</h4>
</div>
<div class="modal-body">
<p>This is a large modal 03.</p>
</div>
</div>
</div>
</div>