How to resize and animate Twitter's Bootstrap 2 modal window?

问题

I would like to ask if anybody can give me some ideas to dynamically resize a bootrap 2 modal window, with animated effect smoothly.

I am thinking of making it work like colorbox when the content of the modal changes it changes its width and height depending on the contents dimensions.

回答1:

What should trigger the resize? Look here: https://stackoverflow.com/a/245011/1596547 You can use this to resize your modal. See: http://bootply.com/71672

For Twitter's Bootstrap 3, see: https://stackoverflow.com/a/18042644/1596547

html:

<div class="container">
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
    <h3 id="myModalLabel">Modal header</h3>
      </div>
  <div class="modal-body">
      <!--long text--><a href="#" id="resize">Resize</a>
 </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

</div>

javascript:

$('#resize').click(function(){$("#myModal").animate({width:"200px"},600,'linear');});

Keep the modal's position centered:

The centered position is set by a negative left-margin of the .modal class. The value of this negative left-margin will be half the width of the modal. So to keep the position centered when resizing try something like:

    $("#myModal").animate({"width":"200px","margin-left":"-100px"},600,'linear');

Easings:

jQuery core ships with two easings: linear, which progresses at a constant pace throughout the animation, and swing (jQuery core's default easing), which progresses slightly slower at the beginning and end of the animation than it does in the middle of the animation.

jQuery UI provides several additional easing functions see: http://api.jqueryui.com/easings/

Or this plugin: http://gsgd.co.uk/sandbox/jquery/easing/ see also: http://easings.net/

来源：https://stackoverflow.com/questions/18033499/how-to-resize-and-animate-twitters-bootstrap-2-modal-window

标签

twitter-bootstrap

modal-dialog