2

私は現在、jSignature（署名をキャプチャするプラグイン）をtwitterブートストラップモーダル内で機能させることを試みています。何らかの理由で、署名ボックスがモーダル内に収まるように縮小され、署名が正しく機能しなくなりました。これが参照用のjsFiddleですhttp://jsfiddle.net/someyoungideas/3B3jS/。

<!-- 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">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p id="signature"></p>
  </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>

ありがとう

4

2 に答える 2

11

これは私のために働くようです！

$('#myModal').on('show.bs.modal', function (e) {    
  $("#signature").jSignature();
  $("#signature").resize();
});

jSignature の初期化とサイズ変更の両方をタイムアウトでラップする必要がある場合がいくつかありましたが、モーダル自体のプロセスのスタイリングに大きく依存していると思います。

于 2015-07-13T15:59:19.667 に答える
2

jSignaturedivは、初期化された内部に収まります。つまり、jSignature の初期化時にdivwith idが 0x0 と測定された場合、そのように初期化されます。signature

ページ/ウィンドウのサイズが変更されると、その結果サイズが変更されdiv、jSignature はそのサイズを再調整して div に再び収まるようにします。ただし、この自動サイズ変更は、ウィンドウが同じままではなくサイズ変更される場合にのみdiv機能します。

では、なぜこれが重要なのでしょうか。

jSignature を初期化するときは、hidden に対して初期化しますdiv。この段階でのサイズは 0x0 です。

  • jSignature では、オプション オブジェクトでサイズを指定できます。- シンプルだが醜い解決策

  • にハード サイズ (幅と高さ) を設定できますsignature div。- シンプルだが醜い解決策。

  • が表示され、そのサイズを取得した後、jSignature を初期化できます。signature div- この方法でjSignatureがモーダル内に収まるように提案された解決策。

古い: http://jsfiddle.net/3B3jS/6/

$("#myModal")
// .on('show', function() {
//     console.log('Modal will be shown');
// })
.on('shown', function() {
    // consider checking if the sig widget is already there and if not:
    $("#signature").jSignature()
})
// .on('hide', function() {
//     console.log('Modal will be hidden');
// })
// .on('hidden', function() {
//     console.log('Modal is hidden');
// })
于 2013-01-21T23:35:24.800 に答える