5

stackoverflow.com には何度もお世話になりましたが、実際に質問を投稿したのはこれが初めてです。賢い人たちの助けを前もってありがとう！

jquery-quickfit ( https://github.com/chunksnbits/jquery-quickfit/blob/master/demo/index.html ) を使用して、モーダル内に表示されるテキストのチャンクのサイズを自動的に変更しようとしています。モーダルを処理するためにブーストラップを使用しています ( 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 の最後のビットにブートストラップ モーダル ショー イベントを組み込む必要があると思いますが、その方法がわかりません。

助けてくれてどうもありがとう！

4

1 に答える 1

0

次のようにモーダルを表示した後、クイックフィットをバインドできます。

$('#my-modal').on('show', function() {
   $('.modaltext').quickfit({ max: 40, min: 0, truncate: false });
});
于 2013-04-03T21:41:12.973 に答える