Minimize / Maximize modal of Bootstrap by using jQuery: 3 demos

The modal and minimize/maximize options

As using the modal component of Bootstrap framework, you saw it allows closing the modal window by clicking on the cross button or by adding an option, it can be closed by clicking anywhere outside of the modal window area.

Video of this Tutorial

This is the normal behavior and options available in Bootstrap modal component. If you want to add minimize/maximize options for the modal component, so that as a user clicks on minimize option, the modal will reside at the left bottom of the parent window. If he/she clicks on the maximize button, the modal will appear again, you can do this by using a jQuery plug-in which is the topic of this tutorial.

In that case, as a modal is minimized, the other content of the parent window will be active. As it is maximized, the content of parent window will not be active or a user may not interact with parent window content.

Let me show you adding minimize and maximize options in the modal of Bootstrap in the following demos.

A demo of modal with minimize and maximize options

In this demo, a modal dialog is created by using the Bootstrap JS and its related CSS classes. For example, this is how a modal is created as using the Bootstrap:

<div class=”modal fade mymodal” id=”modal-1″ role=”dialog”>

After that, you define the header and body content etc. As you click the red button in the demo page, the modal will appear with minimize option, have a look:

jQuery Bootstrap modal maximize

See online demo and code

You can see the cross button for closing the modal and minimize button initially. If you click on it, the modal will minimize to the left bottom of the screen with maximize option.

Follow these steps for setting up this modal dialog.

Step 1:

Include the Bootstrap and font-awesome CSS files. The icons for minimize and maximize options are referred from the font-awesome CSS file. The path of icons is set in the font-awesome.css file. If you use some other path to store this file than the demo then edit the location accordingly in the CSS file, otherwise, icons will not appear.

Step2:

Also include the JS libraries of Bootstrap and jQuery.

Step 3:

Use the markup for creating the modal. The close, maximize and minimize options are set there while its functionality is done in the jQuery code which is placed just above the </body> tag.

The markup:

 

Have a look at the <script> and complete code in the demo page.

(Credit: kumar-uxui)

Customizing the modal and header in minimized form demo

In order to customize the modal as per your choice or need, you require dealing with a few CSS classes.

Pick and place those into your own CSS file or in the <style> section. I have written this in detail with demos in the Bootstrap modal tutorial. In this demo, I am just showing how you may customize the modal with maximize and minimize options.

The customized header is also visible as you minimize the modal. Have a look at demo and complete code online:

jQuery Bootstrap modal minimize-custom

See online demo and code

You can see three additional classes in the <style> section, i.e. modal-header, modal-body, and modal-footer. The style of modal-header is also visible as you minimize the modal dialog.

A demo of modal with buttons in footer that close by clicking anywhere

In all above demos, the modal window closed only when you clicked the cross button. In this example, the modal will close as you click anywhere outside the modal. Also, I added additional content i.e. buttons in the footer that will also close the modal dialog.

jQuery Bootstrap modal resize-click

See online demo and code

You may get the complete code, including CSS, jQuery, and markup from the demo page. One thing to be noted, if you are picking the specific items of this plug-in, the last <div>:

<div class=”minmaxCon”></div>

deals with minimize position so must take it and its related CSS.