Question

确定，

我有一个Jquery DataTable，它在第一列上有一个click事件。 click事件调用一个函数，该函数又调用C＃Webmethod来检索要在对话框中填充的数据。

我的问题是我似乎无法获得调整大小的模态。我使用了以下设置，但没有区别。

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

在函数结束时调用它。该方法包含敏感信息，所以我不能发布它的内容，但调用的框架如下：

"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*/});

<强>更新

尝试设置#myModal的大小，或者将其设置为css的百分比

Answer 3

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

如果您想使用jQuery-ui resizable widget，则应使用显式调用对其进行初始化：

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

请参阅可调整大小的examples和api doc。

如果您希望初始对话框适合屏幕，则应添加一些代码以检查对话框在打开时是否适合（$('#modal').on('shown', function(){ ... })），方法是检查对话框的尺寸视口尺寸，如果对话框落在外面，则调整它。

Jquery模式没有调整大小

3 个答案: