Modals in Bootstrap

Goud.Kv
Posted by in Bootstrap category on for Intermediate level | Points: 250 | Views : 5971 red flag

Bootstrap is developed by Twitter Inc, and comes with predefined CSS and JavaScript. By using Bootstrap, we can design a very responsive website easily. It is very handy once you understand.
Recommendation
Read Tabs with JavaScript in Bootstrap before this article.

Introduction

Please read Bootstrap Introduction if you are new to Bootstrap.
Modals are the form fields which can be shown as dialog or a popup. Bootstrap comes with some predefined Modal Classes that you might see in bootstrap.css.

Background

The main objective of this article is to learn creating different types of Modals using Bootstrap.

Using Bootstrap code

As we said above, there are so many styles regarding to Modals in bootstrap.css which are used to create modals in our application.
Lets see creating Modal with Data attributes as shown in below code
<a href="#modelSave" role="button" class="btn btn-success" data-toggle="modal">Click to Show Modal</a>

<div id="modelSave" 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>
                <h3>Welcome, This is Modal Header</h3>
            </div>
            <div class="modal-body">
                <p>This is the body of the Modal</p>
                <span class="text-warning">Normal Text</span> & <span class="text-danger"><small>Small Text</small></span>
            </div>
            <div class="modal-footer">
                <span class="pull-left">This is the Footer Section</span>
                <a href="#" class="btn btn-primary">Cancel</a>
                <a href="#" class="btn btn-primary">Back</a>
                <a href="#" class="btn btn-primary">Next</a>
            </div>
        </div>
    </div>
</div>
Observe the above code clearly where we have used so many modal related classes like heading, body, footer, content etc. 
If you run this you might see the output something like below in your browser,

We can close this as we do for Alerts.

Modal using JavaScript:
We can also create the same Modal shown above by using a little Script as shown below,
<script type="text/javascript">
    $(document).ready(function () {
        $("#modalSave").modal('show');
    });
</script>
And your HTML as,
<div id="modalSave" 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>
                <h3>Welcome, This is Modal from JavaScript</h3>
            </div>
            <div class="modal-body">
                <p>This is the body of the Modal</p>
                <span class="text-warning">Normal Text</span> & <span class="text-danger"><small>Small Text</small></span>
            </div>
            <div class="modal-footer">
                <span class="pull-left">This is the Footer Section</span>
                <a href="#" class="btn btn-primary">Cancel</a>
                <a href="#" class="btn btn-primary">Back</a>
                <a href="#" class="btn btn-primary">Next</a>
            </div>
        </div>
    </div>
</div>
Now run this combination of code in your browser to get the same result as above


Hiding Modal:
In order to hide the model, Just use 'Hide' instead of 'Show' in the above Script i.e,
<script type="text/javascript">
$(document).ready(function () {
    $(".hide-modal").click(function () {
        $("#myModal").modal('hide');
    });
});
</script>
This will hides your Modal and doesn't shows anything.

Toggle Function:
There is a toggle function in the JavaScript for Modals of Bootstrap. In order to use that, you have to follow the below script,
<script type="text/javascript">
$(document).ready(function () {
    $(".toggle-modal").click(function () {
        $("#modalSave").modal('toggle');
    });
});
</script>
This function will toggles the action of Modal for the Modal Firing element such as Button etc.

KeyBoard Function:
There is another function called keyboard(boolean) for Modals which makes use of Keyboard Keys such as Esc to close the Modal
<script type="text/javascript">
$(document).ready(function () {
    $(".launch-modal").click(function () {
        $("#modalSave").modal({
            keyboard: false
        });
    });
});
</script>
By default it is set to true and use the above Script to make it disabled.

Setting Alert from JavaScript:
We can also set the Alert messages from JavaScript to the Modals. Take a look at below script in which we are setting alert on closing the Modal,
<script type="text/javascript">
$(document).ready(function () {
    $("#modalSave").on('hidden.bs.modal', function () {
        alert("Modal window has closed Completely.");
    });
});
</script>
This will shows an Alert message after closing your Modal like below,

Use shown.bs.modal event instead of hidden.bs.modal to show the alert on Modal StartUp.

There is another function called backdrop(boolean), that includes the modal backdrop element. If you specifies static to the backdrop function, that doesn't closes modal on clicking.

You might also use modal-lg and modal-sm classes to create larger and smaller modals respectively.

Conclusion

In this article, we have seen different types of creating Modals by using Bootstrap. Hope you Understand it. If you have any doubts on this topic, please ask in the below comment box.

Thanks for reading.

Regards,
Krishna.

Recommendation
Read Accordion & Collapse in Bootstrap after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Posted by: Jayakumars on: 7/4/2014 | Points: 25
I need using Bootstrap Layout and insert this fields to db name,dob,Empno,amount using validation
and Crud operations how will do this mvc4 and Bootstrap templates

Login to post response

Comment using Facebook(Author doesn't get notification)