How to Create Modal Box in Bootstrap

Modal is basically a dialog box or popup window that is used to provide important information to the user or prompt user to take necessary actions before moving on. Modals are widely used to warn users for situations like session time out or to receive their final confirmation before going to perform any critical actions such as saving or deleting important data.

You can easily create very smart and flexible dialog boxes with the Bootstrap modal plugin. The following example will show you how to create a simple modal with a header, message body and the footer containing action buttons for the user.

Example Code

<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”>Confirmation</h4>

</div>

<div class=”modal-body”>

<p>Do you want to save changes you made to document before closing?</p>

<p class=”text-warning”><small>If you don’t save, your changes will be lost.</small></p>

</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 changes</button>

</div>

</div>

</div>

</div>

Activate Modals via Data Attributes

You can activate a Bootstrap modal by clicking on the button or link via data attributes without writing any JavaScript code. See the following example:

Example Code

<!– Button HTML (to Trigger Modal) –>

<a href=”#myModal” role=”button” class=”btn btn-large btn-primary” data-toggle=”modal”>Launch Demo Modal</a>

<!– Modal HTML –>

<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”>Confirmation</h4>

</div>

<div class=”modal-body”>

<p>Do you want to save changes you made to document before closing?</p>

<p class=”text-warning”><small>If you don’t save, your changes will be lost.</small></p>

</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 changes</button>

</div>

</div>

</div>

</div>

The above example launches the modal window on click of the “Launch Demo Modal” button. Let’s go through each part of this modal code one by one for a better understanding.

Activate Modals via JavaScript

You may also activate a Bootstrap modal window via JavaScript — just call the modal() Bootstrap method with the modal id or class selector in your JavaScript code.

Example Code

<script type=”text/javascript”>

$(document).ready(function(){

$(“.btn”).click(function(){

$(“#myModal”).modal(‘show’);

});

});

</script>

4 Responses to “How to Create Modal Box in Bootstrap”

  1. jordan 4 says:

    Thanks so much for giving everyone such a spectacular opportunity to read in detail from here. It is usually so good and full of fun for me and my office fellow workers to visit your website particularly thrice in 7 days to see the new stuff you will have. And definitely, I’m just usually pleased with your fantastic guidelines you serve. Selected 2 ideas in this post are unequivocally the most beneficial I’ve ever had.

  2. I intended to write you the tiny remark to give many thanks once again just for the unique guidelines you’ve discussed in this case. It has been really tremendously open-handed with you to offer extensively what exactly most people could have marketed as an e-book in making some profit on their own, certainly seeing that you might have tried it in the event you considered necessary. Those advice likewise served as the fantastic way to comprehend most people have the same desire similar to mine to know much more when it comes to this issue. I believe there are millions of more pleasant periods up front for people who scan through your blog.

  3. Thank you for your whole labor on this site. Ellie loves getting into investigations and it’s easy to understand why. We hear all relating to the lively medium you produce invaluable thoughts through this blog and as well improve contribution from some others on that content while my daughter is undoubtedly starting to learn a whole lot. Take advantage of the remaining portion of the year. You are performing a stunning job.

  4. nike shox says:

    I wanted to compose you that little observation to help thank you very much as before about the amazing ideas you’ve documented on this page. It is certainly extremely generous of you to deliver publicly what exactly a few people could possibly have offered as an e-book to make some profit on their own, precisely considering the fact that you might well have tried it if you ever wanted. Those thoughts in addition served to become good way to know that the rest have the same eagerness the same as my very own to learn way more around this issue. I believe there are thousands of more fun times ahead for individuals who browse through your site.

​Leave a Comment

Comment authors age:




Starting Javascripts Using jQuery

How to Create Custom Shortcode in WordPress