I am seeking assistance with a problem that I am encountering. I am currently using Bootstrap version 5.0.2 (js and css). Despite coding all the required parameters, I am unable to make the modal functionality work. I have been trying to figure out what's causing this error for quite some time now. Any help would be greatly appreciated. Thank you.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<link rel="stylesheet" href="css/bootstrap-5.0.2-css/bootstrap.css"> <!-- BOOTSTRAP CSS -->
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.0.js" ></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script src="js/bootstrap-5.0.2-js/bootstrap.bundle.js"> </script> <!-- BOOTSTRAP JS -->
<script src="js/script.js"> </script>
<script src="js/scriptForEdit.js"> </script>
</head>
<body>
<!-- CONTENT -->
....
<button id="previewFormattedSchedules" class="sp-btn-size lsc-btn-adjust btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#modalcontainer">Preview Formatted Schedules</button>
<button id="validateSchedules" class="sp-btn-size lsc-btn-adjust position-absolute btn btn-outline-primary">Validate</button>
<button id="finalizeSchedules" class="sp-btn-size lsc-btn-adjust position-absolute btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalcontainer">Finalize</button>
<!-- MODAL -->
<div class="modal fade" id="modalcontainer" tabindex="-1" aria-labelledby="modalcontainer" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
Error:
modal.js:332 Uncaught TypeError: Cannot read property 'classList' of undefined
at Modal._isAnimated (modal.js:332)
at Modal._initializeBackDrop (modal.js:205)
at new Modal (modal.js:82)
at Function.getOrCreateInstance (base-component.js:55)
at HTMLButtonElement.<anonymous> (modal.js:434)
at HTMLDocument.handler (event-handler.js:120)