1

Ok、

最初の列にクリック イベントがある Jquery DataTable があります。クリック イベントは、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>
4

3 に答える 3

1

この助けになるかもしれません：

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

アップデート

サイズを設定する#myModalか、cssの一部をパーセントで試してください

于 2013-11-01T13:58:56.727 に答える