title: re-size the modal dialog in bootstrap dynamically
body: <p>I have a Modal Popup (Bootstrap) which displays content based on the user selection</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/a/16152629/2260496">I've used this as my reference, Also added this to my script section in the aspx page</a></li>
  </ul>
  
  <p>This is the javascript code that i've used to check for the users selection</p>
  
  <pre><code>PlayerMP.getFunctionalDetails = function (type, UserID, SessionID, SessionNo) {
  $.ajax({
      type: "GET",
      url: PlayerMP.URL,
      data: "rt=4&amp;type=" + type + "&amp;UserID=" + UserID + "&amp;SessionID=" + SessionID + "&amp;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";
      }
  });
  }
  </code></pre>
  
  <ul>
  <li>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 <code>table-responsive</code> 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.</li>
  <li>The width of the 2nd and the 3rd case's of the modal seem to work fine.</li>
  </ul>
  
  <p>This is the code for the modal window thats being called</p>
  
  <pre><code> &lt;div class="modal fade" id="divFunctionalsSplit" tabindex="-1" role="dialog" aria-hidden="true"&gt;  
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt; 
                    &lt;div class="modal-body"&gt;
                      &lt;div class="table-responsive"&gt;
                          &lt;div id="divFunctionalDetails"&gt;&lt;/div&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
                     &lt;div class="modal-footer"&gt;
                     &lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;Done&lt;/button&gt;
                     &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <ul>
  <li><strong>Fullscreen Browser</strong>
  <img src="https://i.stack.imgur.com/YaZ9b.jpg" alt="Full screen image"></li>
  <li><strong>Resized Browser</strong>
  <img src="https://i.stack.imgur.com/RZX8t.jpg" alt="Resized Image"></li>
  </ul>