Bootstrap Popups

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.

//
// These are the required libraries u must include
//

<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:

//
// These code for display links
//
<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:

//
//This is the code for postcomment popup
//


<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">&times;
                            </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>

//
//This is the code for the Login popup
//
<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">&times;
                            </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

• 2014-10-02