如何调整和动画Twitter的引导2模式窗口？(How to resize and animate

我想问一下，如果有人可以给我一些想法，动态调整一个bootrap 2模式窗口，具有流畅的动画效果。

我想使它像颜色框时的工作模式的内容改变它取决于内容的尺寸改变其宽度和高度。

Answer 1:

我应该触发调整大小？ 看看这里： https://stackoverflow.com/a/245011/1596547您可以使用此调整您的模式。 请参阅： http://bootply.com/71672

对于Twitter的引导3，请参阅： 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');});

请为中心的模式的位置 ：

居中位置由.modal类的负左距设置。 该负左余量的值将是模态的宽度的一半。 所以要不断调整尝试像在中心的位置：

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

渐变效果 ：

jQuery的核心船舶有两个渐变效果：线性的，这在整个动画的进展以恒定的速度和摇摆（jQuery的核心默认宽松政策），其进展比它在动画中动画的开始和结束时稍微慢一些。

jQuery用户界面提供了一些额外的宽松政策功能看： http://api.jqueryui.com/easings/

或者这个插件： http://gsgd.co.uk/sandbox/jquery/easing/另见： http://easings.net/

文章来源: How to resize and animate Twitter's Bootstrap 2 modal window?