twitter-bootstrap - 如何调整 Twitter 的 Bootstrap 2 模态窗口的大小和动画？

Question

我想问是否有人可以给我一些想法来动态调整 bootrap 2 模态窗口的大小，并具有流畅的动画效果。

当模态的内容发生变化时，我正在考虑让它像彩盒一样工作，它会根据内容的尺寸改变它的宽度和高度。

Answer 1

什么应该触发调整大小？看这里：https ://stackoverflow.com/a/245011/1596547您可以使用它来调整您的模态。见：http ://bootply.com/71672

对于 Twitter 的 Bootstrap 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 UI 提供了几个额外的缓动函数，参见：http ://api.jqueryui.com/easings/

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