Bootstrap Modal with 7 FREE Templates
What is a modal dialog?
The modal window is a smart dialog that is displayed over the parent window to interact with the users of the website.
This is quite useful and gets users attention fully to convey some message or get user’s feedback.
Watch Video of this Tutorial
For example, to conduct a survey you may use the modal window.
Similarly, to get users feedback or announcing a seminar or some other event etc.
Also See:
Bootstrap 5 Modal without jQuery | Modal 4 Modals
How to create Bootstrap Modal
Creating modal dialogs by using Bootstrap framework is quite simple and require the least coding. For that, you simply need to include the modal.js plug-in. If you already included the JS library of Bootstrap framework, then you do not need to include plug-in separately.
Following are a few examples of creating the Modals in Bootstrap along with demo and code online.
A basic modal example
A modal window generally has three sections that are divided into div elements. The sections include a header that contains the main heading of the dialog. After that, the body of the modal window that will show the message in detail and finally the last section is the footer. This is where actions are included.
For example, if the modal is taking the Name/Email then footer section may contain Subscribe/Cancel actions.
The div elements contain the modal related classes provided by the framework. See a simple dialog below. You can see the live demo and code by clicking the link/image below:
See online demo and code
The markup:
|
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 27 28 29 |
<div class="container"> <h1>Bootstrap Modal demo</h1> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Click here to see Modal window </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Header message in the Modal!</h4> </div> <div class="modal-body"> The body of the modal, where you can show a message in single or multi-line. Even include a video. <br /> For example, embed a youtube video! OR <br /> Add some picture. </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">I got it! Close</button> </div> </div> </div> </div> |
You can see, as the demo page is loaded, it is showing a button to click in order to show the modal window. You can do it as the webpage loads as well (shown in the last example).
As you click the button, the modal will be launched with three sections. As you look into the code, the first div specifies the .modal class along with the .fade class. If you want Bootstrap modal dialog to appear without fading effect or animation, remove that class.
The id of the div is also specified, which is referred in the button element to launch it.
The next div specifies the size of the dialog that uses the .modal-dialog class. You may specify two additional classes there to specify the size of the dialog:
- For large dialog, use .modal-lg
- For small dialog, use .modal-sm
The next div element specifies the content of the modal dialog that includes the header containing the action buttons like close along with the header message.
It also includes the .modal-body class where you will display the message. You may even include the videos or pictures there.
The final div in the main content div is for the footer that contains the .modal-footer class. This is where the footer action buttons are given, like “I got it, close” in this example is used.
An example of smaller modal window
The following demo shows a small sized modal dialog with a button in the footer section. See the demo and little description below:
See online demo and code
The markup:
|
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 27 28 29 |
<div class="container"> <h1>Bootstrap Modal demo</h1> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Click here for small modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Small modal window!</h4> </div> <div class="modal-body"> The body of the modal, where you can show a message in single or multi-line. Even include a video. <br /> For example, embed a youtube video! OR <br /> Add some picture. </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">I got it! Close</button> </div> </div> </div> </div> |
As mentioned earlier, I simply used the .modal-dialog and .modal-sm in the second div to make dialog small in size.
The above two examples simply used a button to let user close the modal window after seeing the message. You may include more buttons in the footer section as shown in the example below:
See online demo and code
The Markup:
|
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 27 28 29 30 31 |
<div class="container"> <h1>Bootstrap Modal demo</h1> <!-- Button trigger modal --> <button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal"> Modal with multiple actions </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal with multiple buttons</h4> </div> <div class="modal-body"> The body of the modal, where you can show a message in single or multi-line. Even include a video. <br /> For example, embed a youtube video! OR <br /> Add some picture. </div> <div class="modal-footer"> <button type="button" class="btn btn btn-info" data-dismiss="modal">OK</button> <button type="button" class="btn btn btn-warning" data-dismiss="modal">Save</button> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> </div> </div> </div> </div> |
You can see in the footer div, the modal dialog includes three buttons with different styles i.e. Ok, Save and Cancel buttons. Different button classes provided by Bootstrap framework are used for all the buttons.
Custom colored bootstrap modal
Until now, we have used the default colors that are set in the Bootstrap framework for the modal window, which is whitish. Generally, you will need your own color scheme that matches the theme of your web design for the modal windows.
In the following demo, I have used the custom color for the header section of the modal window. See the demo online and detail below that how it’s done.
See online demo and code
The color and other properties of the header are changed this way:
- First of all, a CSS class is created inside the head section of the webpage.
- You must place this class after referring the Bootstrap framework CSS.
- Name the class as .modal-header in the style section.
- This will override the default style of modal Bootstrap.
- In the style, I have changed the background color, text color, font family of the text and added radius for the top left and top right.
- You can change/add more properties as needed by the website theme you are working on.
Customizing the body section of Modal
In this example, the body is also customized along with the header section of the modal window in Bootstrap. The .modal-body class in the header section after the Bootstrap CSS reference will override the default style.
See the following online demo by clicking the image or link below:
See online demo and code
In the following example, the footer section is also customized by using the .modal-footer class. This class will override the default class for the footer.
See online demo and code
You can see the customized header, body, and footer in the above example. You may place all the style in an external CSS file as well. However, you must include this after referring the Bootstrap CSS file in order to override default styles.
A modal example with form fields
In the following example, a form is used inside the body area of the modal window. In above example, we simply showed some text and allowed a user to close the window.
In this example, an email subscription form is used, where a user is asked to enter the Name and Email address. The footer section shows only two options: Subscribe and Cancel.
Unlike the above examples where the Bootstrap modal window only launched as you clicked on the button. In this demo, the modal window will be showed as you the example page loads.
See the example by clicking the links below:
See online demo and code
The loading part is done in the head section by using the jQuery. This code is used to show the modal dialog at startup:
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript" language="javascript"> $(document).ready(function() { $("#myModal").modal('show'); }); </script> |
Where myModal is the main div id of the modal window.
Reference: http://getbootstrap.com/javascript/