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.

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:

Bootstrap simple modal

See online demo and code

The markup:

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:

Bootstrap modal small

See online demo and code

The markup:

 

As mentioned earlier, I simply used the .modal-dialog and .modal-sm in the second div to make dialog small in size.

A modal example with more actions in footer

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:

Bootstrap modal buttons

See online demo and code

The Markup:

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.

Bootstrap modal

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:

Bootstrap moda -header body

See online demo and code

Customizing footer in Modal of Bootstrap

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.

Bootstrap modal header body 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:

Bootstrap modal form

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:

Where myModal is the main div id of the modal window.

 

Reference: http://getbootstrap.com/javascript/