Question

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

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

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/

如何调整Twitter的Bootstrap 2模式窗口的大小和动画？

1 个答案: