Twitter bootstrap 如何调整Twitter的大小和动画'；s引导2模式窗口？

我想问一下，是否有人能给我一些想法来动态调整bootrap 2模式窗口的大小，使其具有平滑的动画效果

---

我想让它像colorbox一样工作，当模式的内容发生变化时，它会根据内容的尺寸改变其宽度和高度。

什么会触发调整大小？ 看这里：你可以用它来调整你的模态。 见：

有关Twitter的Bootstrap 3，请参阅：

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>

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

保持模态的位置居中：

<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>

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

居中位置由.modal类的负左边距设置。此负左侧边距的值将为模式宽度的一半。因此，要在调整大小时保持位置居中，请尝试以下操作：

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

测量：

<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>

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

Query核心有两种简化：线性，在整个动画过程中以恒定的速度进行，而Swing（jQuery核心的默认宽松）在动画的开始和结束时比动画中间的进度稍微慢一些。p> jQuery UI提供了几个额外的功能，请参见：

或者这个插件：另请参见：

它工作得很好，谢谢：）但是我可以使用其他线性的选项吗？由于从右到左仅一侧的宽度减小，模态看起来不居中。。谢谢：）