modal-dialog - 如何调整 Twitter 的 Bootstrap 3 模态窗口的大小和动画？

Question

我想问是否有人可以给我一些想法来动态调整 Bootrap 3 模态窗口的大小，并具有流畅的动画效果。（Clannad System对 TB2 的原始问题）

Answer 1

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

html:

<div class="container">

  <!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <a href="#" id="resize">Resize</a>
        </div>
        <div class="modal-footer">
          <a href="#" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

</div>

javascript:

<script>
$('#resize').click(function(){
    $(".modal-dialog").animate({"width":"200px"},600,'linear');
}
);
</script> 

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/

Note: For Twitter's Bootstrap 2.x see: https://stackoverflow.com/a/18036895/1596547