Pop-up Screen Using Bootstrap:
In this article we are going to see how to create a pop-up window with the help of Bootstrap.
Whenever user clicks a button, a pop-up window will open in the same screen with background in light color.
We are going to use in-build class in Bootstrap for this purpose Modal.
Lets see these modal class in detail before we go ahead with coding,
class name = modal –> Creates a modal (pop-up window)
class name = model-content –> Designing modal window and also acts as a contained holding modal header, modal body and modal footer
class name = model-header –> Acts as a header for Modal
class name = model-body –> Modal body
class name = model-footer –> Modal footer
class name = model – sm, modal – lg –> In built size of model window size, sm is small and lg is for large
In addition this, there are also few more modal events which can be used for better user experience
modal(“toggle”)
modal(“show”)
modal(“”hide”)
Now let us see an example of Modal
Please download Bootstrap for this or you can use the url for this bootstrap purpose
<html lang="en">
<head>
<title>Modal Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<style>
.div1
{
margin-top:200px;
}
</style>
</head>
<body>
<div class="div1">
<center>
<h3>Example for Modal (Pop-up) Using Bootstrap</h3>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</button>
</center>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Welcome to JavaInfinite</h4>
</div>
<div class="modal-body">
<p>Codes Related to Java, HTML ,JQuery, Spring, Hibernate, JSF, JSP and Servlets</p>
</div>
<div class="modal-footer">
<p> @Javainfinite.com
</div>
</div>
</div>
</div>
</body>
</html>
Output:
