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 模式显示事件,但我不知道该怎么做。
非常感谢您的帮助!
最佳答案
你可以像这样显示模态后绑定(bind) quickfit:
$('#my-modal').on('show', function() {
$('.modaltext').quickfit({ max: 40, min: 0, truncate: false });
});
关于javascript - 如何在 Bootstrap 模式中动态调整字体大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15798506/