CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4
user8486381
user8486381

Reputation:

How to make modal responsive in bootstrap 4

Modal function is working but My Js won't work.

I have code from bootstrap 4 modal

<div id="qmsManual" tabindex="-1" role="dialog" aria-labelledby="qmsManualModal" aria-hidden="true" class="modal fade text-left">
    <div role="document" class="modal-dialog qms-dialog">
        <div class="modal-content qms-modal">
            <div class="modal-header">
                <h4 id="qmsManualModal" class="modal-title">QMS Manual</h4>
                <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body">
                <object data="../Files/Manual/QMS-Manual.pdf#toolbar=0&navpanes=0&statusbar=0&view=Fit;readonly=true;disableprint=true;" type="application/pdf" width="100%">
                    <p>Your web browser doesn't have a PDF plugin.
Instead you can <a href="../Files/Manual/QMS-Manual.pdf">click here to
download the PDF file.</a></p>
                </object>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
                <button type="button" class="btn btn-primary"><em class="ti-download"></em> Download</button>
            </div>
        </div>
    </div>
</div>

Then here is my JS and It works fine in my bootstrap 4 modal. (trying it to make draggable and resizable):

$(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%'
    });
  });
});

And plugin scripts

<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper.js/umd/popper.min.js"> </script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="js/charts-home.js"></script>
<script src="../assets/JS/ajax.googleapis.com-ajax-libs-jquery-3.3.1-jquery.min.js"></script>

Upvotes: 3

Views: 17789

Answers (1)

Daouda
Daouda

Reputation: 111

You can refer to this code, it works fine

<head>
  <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />

</head>

<body>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="control-label">Recipient:</label>
              <input type="text" class="form-control" id="recipient-name">
            </div>
            <div class="form-group">
              <label for="message-text" class="control-label">Message:</label>
              <textarea class="form-control" id="message-text"></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
</body>

$('.modal-content').resizable({
      //alsoResize: ".modal-dialog",
      minHeight: 300,
      minWidth: 300
    });
    $('.modal-dialog').draggable();

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

From CodePen

Upvotes: 4

Related Questions