Introduction
This tip presents an example of popups in bootstrap. In many kind of situations, we require to display data in popups so, now I am going to show in this tip how popups work in bootstrap with responsive mode.
Here, I show an example that is very simple and easy. Here is my main intention is to display popup.
Background
Bootstrap
Bootstrap is the most popular for HTML, CSS and JS framework for developing responsive applications.
Responsive
Responsive means the single application will target any device like mobile, tablet, small PC and large PC.
Popup
The popup means a dialog will appear with rich UI.
Using the Code
Here is the code to display Popup
in responsive mode.
The JQuery is the top of all the .js libraries.
First, we need to include the required libraries.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
After including all required libraries, put your HTML popup code.
Here my requirement is to display two links, one is PostComment
and Login
.
When you click the link, popup will appear with required fields.
For that purpose, we just put the initial display links code:
<div class="container">
<div class="row header" style="text-align:center;color:green">
<h3>Bootstrap popups (Responsive)</h3>
</div>
<div class="row header" style="text-align:center;margin-top:40px;">
<a href="#" data-toggle="modal"
data-target="#PostCommentsModal">Post Comments</a></br></br>
<a href="#" data-toggle="modal" data-target="#LoginModal">Login</a>
</div>
After displaying link, we will map popups to that link. The popup code is below:
<div class="modal fade" id="PostCommentsModal" tabindex="-1"
role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">
<span aria-hidden="true">×
</span><span class="sr-only">
Close</span></button>
<h4 class="modal-title" id="myModalLabel">
Post Comment</h4>
</div>
<div class="modal-body">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control"
placeholder="Your Name" />
</div>
<p>
</p>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control"
placeholder="Your Email" />
</div>
<p>
</p>
<div class="input-group">
<span class="input-group-addon">@</span>
<textarea rows="4" cols="50"
class="form-control" placeholder="Your Message">
</textarea>
</div>
<p>
</p>
<button type="button" class="btn-primary">
Send</button>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="LoginModal" tabindex="-1"
role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×
</span><span class="sr-only">
Close</span></button>
<h4 class="modal-title" id="myModalLabel">
Login</h4>
</div>
<div class="modal-body">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Email" />
</div>
<p>
</p>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Password" />
</div>
<p>
</p>
<button type="button" class="btn-primary">
SignIn</button>
<button type="button" class="btn-primary">
SignUp</button>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default" data-dismiss="modal">
Close</button>
</div>
</div
</div>
</div>
That's it. Now popups are working in responsive mode.
The final output in initial is like this:
The post comment screen is like this in any mode (mobile, tablet, desktop...):
The Login screen is like this in any mode (mobile, tablet, desktop...):
Points of Interest
I worked on many popup controls but bootstrap popups are very good rich UI and much simpler.
History