Bootstrap Modals

0 3616

Bootstrap Modals - Bootstrap in create easily and flexible dialog boxes with the Bootstrap modal. For create the dialog boxes, use below example code.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Modals </title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">
<h3> Bootstrap Modal - click here to below button </h3>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
<h4 class="modal-title"> About us </h4>
</div>
<div class="modal-body">
<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis 
condimentum odio. In hac habitasse platea dictumst. Cras rhoncus in 
metus a maximus. Vestibulum id justo sed magna molestie commodo. Aliquam
 ornare sem nulla. Interdum et malesuada fames ac ante ipsum primis in 
faucibus. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> Close </button>
<button type="button" class="btn btn-info"> Read more </button>
</div>
</div>
</div>
</div>

<a href="#myModal" role="button" class="btn btn-info btn-lg" data-toggle="modal"> Bootstrap Modal </a>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>

</body>

</html>