1

好的，

我有一个 Jquery DataTable，它在第一列上有一个点击事件。单击事件调用一个函数，该函数又调用一个 C# Web 方法来检索数据以填充到对话框中。

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

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

this 在函数结束时调用。该方法包含敏感信息，因此我无法发布其内容，但调用的框架如下：

"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>
4

3 回答 3

1

我相信你需要：

$('#myModal').modal({resizable:true});
于 2013-10-17T09:26:50.773 回答
1

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

如果您想使用jQuery-ui 可调整大小的小部件，您应该使用显式调用对其进行初始化：

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

请参阅可调整大小的示例和api 文档。

如果您想让初始对话框适合屏幕，您应该添加一些代码来检查对话框在打开时是否适合（$('#modal').on('shown', function(){ ... })），通过检查对话框的尺寸与视口尺寸，并在对话框超出时调整它。

于 2013-11-04T10:17:12.647 回答
1

可能是这样的帮助：

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

更新

尝试设置大小#myModal或它在css中的百分比

于 2013-11-01T13:58:56.727 回答