Everything seems to be in order, but my JavaScript doesn't seem to be functioning.
I've implemented the code for a bootstrap 4 modal below:
<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>
Below is my JavaScript code - I am attempting to make the modal 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%'
});
});
});
Additionally, here are the plugin scripts included:
<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>