引导模式中的内容大小取决于加载时间答案

【问题标题】：Size of content within bootstrap modal varies depending on the time of load引导模式中的内容大小取决于加载时间
【发布时间】：2014-07-11 22:55:15
【问题描述】：

我正在使用引导模式来显示 google api 图表。图表的数据在页面加载时加载，模式包含页面加载时的图表。

起初我只是在页面加载时显示模式，一切看起来都很好。然后我添加了一个按钮，仅在请求时显示模式。其他一切都没有改变。现在图表在模态中很小。

所有代码都是一样的，除了我在按钮上添加了一个按钮和一个onclick事件，显示了模式。

有什么想法吗？

有一个 CSS sn-p 可以改变默认的模式：

.modal
{
    height:80%;
    width:80%;
    margin-left: -40%; 
}

这是模态的html

 <div id="chartsModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="chartsModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="chartsModalLabel">Evolution of number of X</h3>
    </div> 
    <div id="number_of_evolution" class="span11" style="height:40em"></div>
</div>

【问题讨论】：

标签： jquery twitter-bootstrap modal-dialog google-api bootstrap-modal

【解决方案1】：

几乎解决了这个问题，但还有一点问题。我不知道到底是什么原因造成的，但我决定在按下按钮时创建图表，现在一切看起来都很好。无论如何，这似乎是更明智的做法:)

但是如果我打开模态，然后刷新页面，然后再次打开模态，图表又很小。奇怪。

编辑：后者也是固定的，等待模态完全完成加载后再绘制。第二次绘制该图表时，它似乎需要更短的时间（即使中间有一个完整的页面刷新，导致它的大小错误）：

$('#chartsModal').on('shown', function () { ...

【讨论】：