Question

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

Answer 1

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

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

<强>缓和效果：

jQuery核心带有两个缓动：线性，在整个动画中以恒定的速度前进，并且摆动（jQuery核心的默认缓动），在动画的开始和结束时比在中间进展稍慢。动画。

jQuery UI提供了几个额外的缓动函数，请参阅：http://api.jqueryui.com/easings/

或者此插件：http://gsgd.co.uk/sandbox/jquery/easing/另请参阅：http://easings.net/

注意：对于Twitter的Bootstrap 2.x，请参阅：https://stackoverflow.com/a/18036895/1596547

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

1 个答案: