Search code examples
javascripthtmltwitter-bootstraptwitter-bootstrap-2

Minimize or collapse a bootstrap 2.3.2 modal dialog?


Are there a way to add a minimize feature to bootstrap modal dialogs?

 <div class="modal hide fade modal-admin" id="testModal" style="display: none;">
        <div class="modal-header">
          <a data-dismiss="modal" class="close">×</a>
          <h3 id='dialog-heading'></h3>
        </div>
        <div class="modal-body">
            <div id="dialog-data"></div>
        </div>
        <div class="modal-footer">
          <a data-dismiss="modal" class="btn" >Close</a>
          <a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
        </div>
    </div>

I'm using it like a static draggable dialog:

   $('#testModal').modal({backdrop:false})
   $('#testModal').draggable({handle: ".modal-header"}); 

Maybe I'm using a wrong widget for that, but what else?

By minimize I mean that, minimize or collapse the dialog like a little window widget.

Jquery-ui dialogs have a feature like that: http://jsbin.com/ehagoy/154

Why a -1?


Solution

  • Maybe something like:

    $(".modal-header").click(function(){
        $(".modal-body").slideToggle();
      });
    

    Could help you..
    if you want a button for that, only change .modal-header for the button id:

    $("#mybutton").click(function(){
        $(".modal-body").slideToggle();
      });