让jSignature在Twitter Bootstrap模态窗口中正常工作

Question

我目前正在尝试让 jSignature（一款捕捉签名的插件）在 Twitter Bootstrap 模态框内运行。但由于某种原因，签名框被缩小以适应模态框大小，导致签名无法正常工作。以下是 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>

谢谢

- someyoungideas

---

当调整fiddle中嵌入的html的宽度时，签名又可以正常工作了。我尝试添加了一个min-height，但没有帮助。 - SeinopSys

Answer 1

这对我来说似乎有效！

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

有些情况下，我需要将jSignature的初始化和调整大小都包含在超时函数中，但我认为这主要取决于模态框本身的样式和处理过程。

- BGilman

---

我在使用折叠面板时遇到了同样的问题，解决方法如下： '$('#collapsedPanel').on('shown.bs.collapse', function () { $("#signature").resize(); });' - Chris O

Answer 2

jSignature会自适应初始化时所在的div大小。换句话说，如果id为signature的div在jSignature初始化时被测量为0x0，则它将以此尺寸初始化。

当页面/窗口被调整大小时，导致div大小调整，jSignature会再次调整其大小以适应该div。然而，这种自动调整仅在窗口调整大小时起作用，而不是当窗口保持不变但div大小调整时。

现在，为什么这很重要呢？

当您初始化jSignature时，您会针对一个隐藏的div进行初始化。此时，其大小为0x0。

• jSignature允许您在选项对象中指定大小-简单但丑陋的解决方案。

• 您可以为signature div设置固定大小（宽度和高度）-简单但丑陋的解决方案。

• 您可以在signature div可见并获得其大小后才初始化jSignature-建议的解决方案，因为这样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');
// })

- ddotsenko

---

这也适用于在div上执行“常规”的显示/隐藏操作（即没有Bootstrap的情况下）。 - Thomas Landauer