Simple Modal Box Demo & Example using Bootstrap3

Model box is very important element of any web 2.0 website and blog. Today I will discuss how to create simple popup modal box.Modal box can be use for show message,alert and input form.I am using Bootstrap 3 to create modal box.Bootstrap 3 is very awesome css library to create UI element for your website.

We need to include bootstrap 3 CSS and JavaScript file with jQuery lib.Bootstrap is dependent on jquery so we need to include jquery as well.

Also Checkout other Modal Box tutorial,

Step 1: First we need to include library js and css file of bootstrap 3 and jquery.

Select Code
1
2
3
4
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Step 2: Below is Simple HTML code to generate modal box layout,to create a model box we need to create our form layout with html elements and keep it in a div which is our reference div to call model popup box.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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">Sample Model Box - Header Area</h4>
            </div>
            <div class="modal-body">
                <form>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">Recipient:</label>
                    <input type="text" class="form-control" id="recipient-name">
                  </div>
                  <div class="form-group">
                    <label for="message-text" class="control-label">Message:</label>
                    <textarea class="form-control" id="message-text"></textarea>
                  </div>
                </form>
            </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</button>
            </div>
        </div>
    </div>
</div>

Step 3:Its very simple to call model box on target link,we just set href attribute value of target link which is earlier(step 2) created container div id.

Select Code
1
<div class="well"><a class="btn btn-primary pull-right" data-toggle="modal" href="#myModal" >Show Modal</a></div>

Where myModal is the id of modal box.

Sample Modal Box Demo:

simplemodal-box

Live Demo and Source Code