如何調整和動畫Twitter的Bootstrap 2模式窗口？

Question

我想問問是否有人可以給我一些想法，動態調整一個bootrap 2模式窗口，動畫效果順利。

我正在考慮如果模式內容改變它的寬度和高度根據內容尺寸改變，它就像colorbox一樣工作。

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/