在引导程序中动态调整模态对话框的大小

问题描述

我有一个 Modal Popup (Bootstrap)，它根据用户选择显示内容

• )

  为了让它更动态，你需要计算表格的宽度(jQuery width() 或 innerwidth())并设置 modal-dialog根据它.

  参见:http://bootply.com/88364

  I have a Modal Popup (Bootstrap) which displays content based on the user selection

  • I've used this as my reference, Also added this to my script section in the aspx page

  This is the javascript code that i've used to check for the users selection

  PlayerMP.getFunctionalDetails = function (type, UserID, SessionID, SessionNo) {
  $.ajax({
      type: "GET",
      url: PlayerMP.URL,
      data: "rt=4&type=" + type + "&UserID=" + UserID + "&SessionID=" + SessionID + "&SessionNo=" + SessionNo,
      success: function (FunctionalSplitsJS) {
          if (FunctionalSplitsJS.indexOf("SessionExpired=1", 0) == -1) {
  
              $("#divFunctionalDetails").html(FunctionalSplitsJS);
              switch (type) {
                  case 1:
                      $("#divFunctionalsSplit");      //the table goes out of the modal window                           
                       break;
                  case 2:
                      TallyFunctionalSheet();
                      $("#divFunctionalsSplit"); 
                      break;
                  case 3:
                      $("#divFunctionalsSplit"); 
                      break;
              }                
  
               $("#divFunctionalsSplit").modal('show');
          }
          else
              window.location.href = "../Login.aspx?SessionExpired=1";
      }
  });
  }
  

  • The first case has a table which is supposed to be displayed inside the modal popup but the table goes outside the modal window (there is a problem with the width of the modal window but the table-responsive seem to be working) But when i resize the browser to match the width of the tablet the table/modal auto resizes to match each other.
  • The width of the 2nd and the 3rd case's of the modal seem to work fine.

  This is the code for the modal window thats being called

   <div class="modal fade" id="divFunctionalsSplit" tabindex="-1" role="dialog" aria-hidden="true">  
          <div class="modal-dialog">
              <div class="modal-content"> 
                    <div class="modal-body">
                      <div class="table-responsive">
                          <div id="divFunctionalDetails"></div>
                        </div>
                     </div>
                     <div class="modal-footer">
                     <button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
                     </div>
              </div>
          </div>
   </div>
  

  • Fullscreen Browser
  • Resized Browser
  解决方案

  By default Bootstrap sets the width of the .modal-dialog to 600px (large screens above 768 px) or auto(small screens). The code below overrides this:

  $('#myModal').on('show.bs.modal', function () {
      $(this).find('.modal-dialog').css({width:'auto',
                                 height:'auto', 
                                'max-height':'100%'});
  });
  

  (based on: https://stackoverflow.com/a/16152629/2260496)

  To make it more dynamically you will need to calculate the width (jQuery width() or innerwidth())of your table and set the width of the modal-dialog according it.

  See: http://bootply.com/88364

  这篇关于在引导程序中动态调整模态对话框的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

  The End

  ---