What is Bootstrap Modal?

The Modal is a prompt dialog window which is the child of the parent window that is generally used to interact with visitors of the websites without leaving the parent window. Examples can be asking for a subscription to social networks, sign-up to your website etc.

You might have seen a sales related page with the special offer or some kind of discount, as a user closes the parent window showing a dialog to confirm etc.

Using the Bootstrap framework makes it quite easier to use the Modal windows on your website. Modal is not only easy to create, but modal windows are streamlined and flexible with the smart styles that require minimum functionality.

Following are a few examples of using Twitter Bootstrap Modal.

A subscription modal example

Following example shows a Bootstrap framework based modal as you click on the link below. The modal window shows a Bootstrap form with an email textbox field and option to “Subscribe” or Close the window.

Experience this online

Make sure to include the jQuery library and bootstrap.js or bootstrap.min.js file in the header section of the web document.

Bootstrap Modal example as page loads

Following example displays Modal window as the web page loads by using jQuery. The modal window is shown by using modal id “subscribeModal” in the jQuery document.ready() function.

Experience this online

Invoking Modals by Data attribute and JavaScript

You can invoke Bootstrap Modal dialog by using data attribute or in the JavaScript. For example, in the button you can use data-target=”Modal_ID” to display a modal dialog window.

Similarly, you can call a modal dialog by its ID in JavaScript by using different options. Following examples display Modal via data attribute and JavaScript respectively.

Display Modal by data attribute example

As you click on the button “Show modal by Data Attribute”, the modal window will be shown as follows:

Experience this online

Display Modal by JavaScript

Following example shows how to display modal dialog by JavaScript. You can see, as the button “Show modal by JavaScript/jQuery” is clicked, the click event of the button triggers the show method to display dialog by id.

Experience this online

Useful Reading: Bootstrap Tutorial | Bootstrap TableBootstrap Form