如何在引导模式中动态调整字体大小？

Question

stackoverflow.com已经多次保存了我,但这实际上是我第一次发布问题.在此先感谢您对聪明人的帮助!

我正在尝试使用jquery-quickfit(https://github.com/chunksnbits/jquery-quickfit/blob/master/demo/index.html)来自动调整模态中出现的一大块文本.我正在使用boostrap来处理模态(http://twitter.github.com/bootstrap/javascript.html#modals).

现在,在我调整窗口大小后打开模态后,文本只会正确调整大小.当它加载时,文本显得更小(我不确定它继承该初始大小的位置).我希望javascript在触发模态时启动.我确信有一种明显的方法可以做到这一点,但我不是那些精通javascript的人.

这是相关代码的外观:

<button class="btn" data-toggle="modal" data-target="#my-modal">Open Modal</button>

<div id="my-modal" class="modal hide fade row">
  <div class="modal-body">
    <div class="span3 modalicon">
      <i class="icon-image"></i>
    </div>
    <div class="span9" id="modaltextcontainer">
      <span class="modaltext">This is the content I want resized</span>
    </div>
  </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/jquery.quickfit.js"></script>
<script type="text/javascript" charset="utf-8">
  $(function() {
    $(window).on('resize', function() {
      $('.modaltext').quickfit({ max: 40, min: 0, truncate: false });     

    });
    $(window).trigger('resize');    
  });
</script>

<span id="meassure" style="position: absolute; left: -1000px; top: -1000px; font-size: 12px;">..........</span>

我假设我需要在最后一点javascript中加入bootstrap模态show事件,我只是无法弄清楚如何.

非常感谢你的帮助!

Answer 1

您可以在显示模态后绑定 QuickFit，如下所示：

$('#my-modal').on('show', function() {
   $('.modaltext').quickfit({ max: 40, min: 0, truncate: false });
});