jQuery Extension To Minimize And Maximize Bootstrap Modals

A jQuery & jQuery UI extension for Bootstrap that allows the user to minimize and maximize multiple Bootstrap modal windows like the desktop applications.

How to use it:

1. Add the needed jQuery and jQuery UI libraries into your Bootstrap project.

<script src="jquery.min.js"></script> 
<script src="jquery-ui.js"></script>

2. Add a 'minimize' icon to your Bootstrap modals. In this case, we're going to use Font Awesome for the 'minimize' and 'maximize' icons. You can also use any icon font such as Bootstrap's glyphicons

<div class="modal fade mymodal" id="modal-1" role="dialog">
  <div class="modal-dialog"> 
      
      <!-- Modal content-->
      <div class="modal-content">
      <div class="modal-header" style="padding:35px 50px;">
          <button type="button" class="close" data-dismiss="modal"> <i class='fa fa-times'></i> </button>
          <button class="close modalMinimize"> <i class='fa fa-minus'></i> </button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
      <div class="modal-body"  style="padding:40px 50px;">
          <p>Some text in the modal.</p>
        </div>
      <div class="modal-footer"  style="padding:40px 50px;">
          <p>Some text in the modal.</p>
        </div>
    </div>
    </div>
</div>

3. Create a container to place the minimized modal tabs.

<div class="minmaxCon"></div>

4. The required CSS styles.

.min {
  width: 250px;
  height: 35px;
  overflow: hidden !important;
  padding: 0px !important;
  margin: 0px;
  float: left;
  position: static !important;
}

.min .modal-dialog, .min .modal-content {
  height: 100%;
  width: 100%;
  margin: 0px !important;
  padding: 0px !important;
}

.min .modal-header {
  height: 100%;
  width: 100%;
  margin: 0px !important;
  padding: 3px 5px !important;
}

.display-none { display: none; }

button .fa {
  font-size: 16px;
  margin-left: 10px;
}

.min .fa { font-size: 14px; }

.min .menuTab { display: none; }

button:focus { outline: none; }

.minmaxCon {
  height: 35px;
  bottom: 1px;
  left: 1px;
  position: fixed;
  right: 1px;
  z-index: 9999;
}

5. The core JavaScript.

$(document).ready(function() {


    var $content, $modal, $apnData, $modalCon;

    $content = $(".min");


    //To fire modal
    $(".mdlFire").click(function(e) {

        e.preventDefault();

        var $id = $(this).attr("data-target");

        $($id).modal({
            backdrop: false,
            keyboard: false
        });

    });


    $(".modalMinimize").on("click", function() {

        $modalCon = $(this).closest(".mymodal").attr("id");

        $apnData = $(this).closest(".mymodal");

        $modal = "#" + $modalCon;

        $(".modal-backdrop").addClass("display-none");

        $($modal).toggleClass("min");

        if ($($modal).hasClass("min")) {

            $(".minmaxCon").append($apnData);

            $(this).find("i").toggleClass('fa-minus').toggleClass('fa-clone');

        } else {

            $(".container").append($apnData);

            $(this).find("i").toggleClass('fa-clone').toggleClass('fa-minus');

        };

    });

    $("button[data-dismiss='modal']").click(function() {

        $(this).closest(".mymodal").removeClass("min");

        $(".container").removeClass($apnData);

        $(this).next('.modalMinimize').find("i").removeClass('fa fa-clone').addClass('fa fa-minus');

    });

});

---

This awesome jQuery plugin is developed by kumar-uxui. For more Advanced Usages, please check the demo page or visit the official website.