jquery modal not resizing

Question

好的，

我有一个Jquery DataTable，它在第一列有一个点击事件。 click事件调用一个函数，该函数依次调用C＃Web方法来检索要在对话框中填充的数据。

我的问题是，我似乎无法获取调整大小的模式。我使用followin设置，但没有区别。

$('#myModal').modal(resizable:true); 

这被称为函数的末尾。该方法包括sensistive信息，所以我不能发布它的内容，但是呼叫的框架如下：

"fnRowCallback": function (nRow, aoData, iDisplayIndex, iDisplayIndexFull) { 
        if (aoData[11] == 'Duplicate' || aoData[11] == 'Duplicate approved') { 
         $('td:eq(0)', nRow).html('<a class="Main" onclick="ViewDuplicateDetails 
(\'' + aoData[12] + '\', \'' + aoData[4] + '\',\'' + aoData[0] + '\');">' + aoData[0] + '</a>'); 

function ViewDuplicateDetail(param1, param2, param3, param4) 
{ 
     AJAX call code to retrieve the data 
     success: 
     append results to the HTML elements of my dialog (div) 
     $('#myModal').modal(resizable:true); 

} 

我不明白手柄来调整，而当该网站是显示一个屏幕，上分辨率不高，那么模式的底部是不可见的。

编辑 我已经包括了实际模式，柜面有什么昭然若揭。

<div id="myModal" class="modal hide fade" > 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" 
        aria-hidden="true">&times;</button> 
       <h4 id="ticket-id">Message: <span id="messageRef"></span><span 
         id="messageType"></span> 
        <span id="checkrecord"></span> 
        <span id="Id"></span> 
       </h4> 
       </div> 
       <div class="modal-body"> 

       <ul class="nav nav-tabs" id="ticket-tabs"> 
        <li><a href="#tab5">Record</a></li> 
        <li><a href="#tab6">Found</a></li> 
        <li><a href="#tab7">Comments</a></li> 
        <li><a href="#tab8">Audit</a></li> 
       </ul> 
       <div class="tab-content"> 
        <div class="tab-pane active" id="tab5"> 
         <div id="1"></div> 
         <div id="2"></div> 
         <div id="3"></div> 

       </div>  
        <div class="tab-pane" id="tab6"> 
         <div id="results"></div> 
        </div> 
        <div class="tab-pane" id="tab7"> 

        <textarea id="txtComments"></textarea> 
        </div> 
        <div class="tab-pane" id="tab8"> 
        <div id="audit"></div> 
        </div> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <span id="txtWarning" style="float:left; color:#ff0000">You must 
          enter a comment before saving!</span> 

       <button id="btnComplete" class="btn btn-danger">Complete</button> 
       <button id="btnApprove" class="btn btn-primary">Approve</button> 
       <button id="btnSave" class="btn btn-primary">Save</button> 
       <button id="btnConfirmComplete" class="btn btn-danger">Confirm 
       Completion</button> 


        <div id="dowJones" style="text-align:left;"> 

         <img src="Media/images/img2.png" width="94" height="20" 
         alt=""/><br />      
        </div>  
       </div> 
      </div> 

Answer 1

我相信你需要：

$('#myModal').modal({resizable:true}); 

Answer 2

可能是这样的帮助：

$('#myModal').modal(...).resize(function(){/*code on resizing*/}); 

UPDATE

尝试#myModal集大小或它的一部分在百分之CSS

Answer 3

resizable不是Bootstrap's modals的原生选项。

如果你想使用jQuery-ui resizable widget，你应该使用显式调用初始化：

$(function(){ 
    $('#modal').resizable({ /*resizable options*/ }) 
}); 

见可调整大小examples和api doc。

---

如果你想有初始对话框中配入屏幕，你应该添加一些代码来检查对话是否打开（$('#modal').on('shown', function(){ ... })）时的配合，通过检查对话框的尺寸对视口尺寸和如果对话框不在外面，请调整它。