讓jSignature使用Twitter Bootstrap模式

Question

我目前正試圖讓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> 

感謝

Answer 1

jSignature適合自己的div內，它被初始化。換句話說，如果在jSignature被初始化的時候div的id爲signature被測量爲0x0，則它被初始化。

當調整頁面/窗口的大小，導致div調整大小時，jSignature再次調整其大小以適合div。但是，只有當窗口大小調整爲時，此自動調整大小才能工作而不是Windows保持不變，但div調整大小。

現在，爲什麼這很重要？

當您初始化jSignature時，您將其初始化爲隱藏的div。在這個階段它的大小是0x0。

• jSignature允許您在選項對象中指定大小。 - 簡單但難看的解決方案

• 您可以將硬尺寸（寬度和高度）設置爲signaturediv。 - 簡單但很難看的解決方案。

• 你可以初始化jSignature 後signaturediv變爲可見，並獲得其大小。 - 以這種方式建議的解決方案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'); 
// }) 

Answer 2

這似乎爲我工作！

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

已經有一些情況下，我需要換兩個jSignature初始化和超時調整，但我認爲這主要取決於造型的模式本身的過程。