Main Menu

Working with Bootstrap Plugin: Modal Window

Bootstrap has gained a lot popularity among web designers and developers, in this site BuiltWithBootstrap you can see that there are many sites that have adopted Bootstrap as the foundation of their website or webapps.

In our previous post we walked through some UI Components in Bootstrap. This time, in this post we are going to explore, Bootstrap Plugins.

As we mentioned before, Bootstrap comes with a number of custom jQuery plugins that work seamlessly with each other. So, we don’t have to rely on third-party plugins which may have script clashes.

In this post we are going to explore the following plugin that attracts me most: Modal Window.

Setup the document

Before we can run these plugins, make sure that all the necessary files have been included in our document, as follows:

Since it is a jQuery plugin, don’t forget to also include the jQuery library, otherwise it won’t work. If all is set, we are good to go.

The Modal Window

Using Modal is the better method to get attention from users versus using pop-up windows which could be blocked by the browsers. Let’s see the following example:

The modal window in Bootstrap is simply defined as modal class. We can add several sections in it, like the content and the header, each can be contained with a div and respectively assigned with these classes modal-body and modal-header.

In this button we also added a data- attribute that pointed to the modal window. That’s it, all other things like the class and the function have been taken care of and once we click on this button, the window should be hidden.

Fade Effect

Now, let’s make the modal window fancier. In this case, we are going to add the fade effect. To do so, we simply add fade class in in the div, as follows.

Now, instead of showing up instantly, the modal window will slide down and fade in, then when close the window it will do the opposite, slide up and fade out. Most of these effect is done through the CSS3 new properties.

Bonus Tip

The Modal window plugin in Bootstrap is easy to implement. But, can we use it for other than the Bootstrap framework? Fortunately, Bootstrap has provided an option to download only necessary parts of Bootstrap. So, if you need only this plugin for your non-Bootstrap website, here is what you can do:

In Bootstrap website, go to Customization page. In this page, uncheck all the options and select only the following:

Buttons style under Base CSS.

Modals under JS Components.

Modal under jQuery plugins.

That way, our files will not be bloated with other library codes that are not necessary.