Description :
Modal is a plugin popup window which is shown on the top of current page.Here small modal having .modal-sm class, large modal having .modal-lg class and medium modal having .modal-md class.In this example modals are opened with data-target attribute.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap Input Example</title>
<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.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#largeModal">Open Large Modal</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mediumModal">Open Medium Modal</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#smallModal">Open Small Modal</button>
</div>
<!-- Large Modal -->
<div id="largeModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Header</h4>
</div>
<div class="modal-body">
<p>This is a example of large bootstrap modal opened with css. Thanks to visiting LearnKode.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Medium Modal -->
<div id="mediumModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Header</h4>
</div>
<div class="modal-body">
<p>This is a example of medium bootstrap modal opened with css.Thanks to visiting LearnKode.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Small Modal -->
<div id="smallModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Header</h4>
</div>
<div class="modal-body">
<p>This is a example of small bootstrap<br /> modal opened with css.<br /> Thanks to visiting LearnKode.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Description :
.col-md ,.col-sm,.col-lg,.col-xs classes are used here.Resize the browser to see the effect of used classes and try to analyse.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap Input Example</title>
<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.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridModal"> Open Modal </button>
<div class="modal fade" id="gridModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6 col-md-offset-6">.col-md-6 .col-md-offset-6</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-lg-12 hidden-md hidden-xs hidden-sm">
.col-lg-12
</div>
<div class="col-md-12 hidden-sm hidden-xs hidden-lg">
.col-md-12
</div>
<div class="col-xs-12 hidden-md hidden-sm hidden-lg">
.col-xs-12
</div>
<div class="col-sm-12 hidden-md hidden-xs hidden-lg">
.col-sm-12
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div>
</div>
<!-- /.modal -->
</body>
</html>
Description :
modal is opened using juery i.e data-target attribute is not used to open modal.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap Input Example</title>
<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.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<button type="button" class="btn btn-primary btn-lg" id="largeModalBtn">Open Large Modal</button>
<button type="button" class="btn btn-primary btn-lg" id="mediumModalBtn">Open Medium Modal</button>
<button type="button" class="btn btn-primary btn-lg" id="smallModalBtn">Open Small Modal</button>
</div>
<!-- Large Modal -->
<div id="largeModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Header</h4>
</div>
<div class="modal-body">
<p>This is a example of large bootstrap modal opened with javascript. Thanks to visiting LearnKode.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="closeLargeModal">Close</button>
</div>
</div>
</div>
</div>
<!-- Medium Modal -->
<div id="mediumModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Header</h4>
</div>
<div class="modal-body">
<p>This is a example of medium bootstrap modal opened with javascript.Thanks to visiting LearnKode.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="closeMediumModal">Close</button>
</div>
</div>
</div>
</div>
<!-- Small Modal -->
<div id="smallModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Header</h4>
</div>
<div class="modal-body">
<p>This is a example of small bootstrap<br /> modal opened with javascript.<br /> Thanks to visiting LearnKode.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="closeSmallModal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
//Open And Close Large Modal With Javascript
$("#largeModalBtn").click(function () {
$("#largeModal").modal('show');
});
$("#closeLargeModal").click(function () {
$("#largeModal").modal('hide');
});
//Open And Close Medium Modal With Javascript
$("#mediumModalBtn").click(function () {
$("#mediumModal").modal('show');
});
$("#closeMediumModal").click(function () {
$("#mediumModal").modal('hide');
});
//Open And Close Small Modal With Javascript
$("#smallModalBtn").click(function () {
$("#smallModal").modal('show');
});
$("#closeSmallModal").click(function () {
$("#smallModal").modal('hide');
});
});
</script>