title: How to make modal responsive in bootstrap 4
body: <p>Modal function is working but My Js won't work.</p>
  
  <p>I have code from bootstrap 4 modal</p>
  
  <pre><code>&lt;div id="qmsManual" tabindex="-1" role="dialog" aria-labelledby="qmsManualModal" aria-hidden="true" class="modal fade text-left"&gt;
      &lt;div role="document" class="modal-dialog qms-dialog"&gt;
          &lt;div class="modal-content qms-modal"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h4 id="qmsManualModal" class="modal-title"&gt;QMS Manual&lt;/h4&gt;
                  &lt;button type="button" data-dismiss="modal" aria-label="Close" class="close"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;object data="../Files/Manual/QMS-Manual.pdf#toolbar=0&amp;navpanes=0&amp;statusbar=0&amp;view=Fit;readonly=true;disableprint=true;" type="application/pdf" width="100%"&gt;
                      &lt;p&gt;Your web browser doesn't have a PDF plugin.
  Instead you can &lt;a href="../Files/Manual/QMS-Manual.pdf"&gt;click here to
  download the PDF file.&lt;/a&gt;&lt;/p&gt;
                  &lt;/object&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" data-dismiss="modal" class="btn btn-secondary"&gt;Close&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary"&gt;&lt;em class="ti-download"&gt;&lt;/em&gt; Download&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then here is my JS and It works fine in my bootstrap 4 modal. (trying it to make draggable and resizable):</p>
  
  <pre><code>$(document).ready(function() {
    $('.qms-modal').resizable({
      //alsoResize: ".modal-dialog",
      minHeight: 300,
      minWidth: 300
    });
    $('.qms-dialog').draggable();
  
    $('#qmsManual').on('show.bs.modal', function() {
      $(this).find('.modal-body').css({
        'max-height': '100%'
      });
    });
  });
  </code></pre>
  
  <p>And plugin scripts</p>
  
  <pre><code>&lt;script src="vendor/jquery/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="vendor/popper.js/umd/popper.min.js"&gt; &lt;/script&gt;
  &lt;script src="vendor/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="vendor/jquery.cookie/jquery.cookie.js"&gt; &lt;/script&gt;
  &lt;script src="vendor/chart.js/Chart.min.js"&gt;&lt;/script&gt;
  &lt;script src="vendor/jquery-validation/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/charts-home.js"&gt;&lt;/script&gt;
  &lt;script src="../assets/JS/ajax.googleapis.com-ajax-libs-jquery-3.3.1-jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>