I am trying to link a modal in a different page. But when I click the button to toggle modal, nothing comes up. I have two files: courses.php and addCourses.php. course.php is where the button to click the modal is from, and addCourses.php is the modal form that should appear but dosen’t
courses.php
<div class="btn mb-2 mb-md-0">
<a href='addCourses.php' class="btn btn-sm btn-gray-800 d-inline-flex align-items-center animate-up-2" data-bs-toggle="modal" data-bs-target="#modal-form"> Add Course </a>
<!-- Modal -->
<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content rounded bg-white">
</div>
</div>
</div>
</div>
addCourses.php
<div class="modal-body p-0">
<div class="card bg-white p-4">
<button type="button" class="btn-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="card-header border-0 bg-white text-center pb-0">
<h2 class="h4">Course Info</h2>
</div>
<div class="card-body">
<!-- Form -->
<form action="courses.php" method="post" class="mt-4">
<div class="form-group mb-4">
<label for="course_name">Course name:</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon2"><span class="fas fa-hotel"></span></span>
<input type="text" name="course_name" class="form-control" required>
</div>
</div>
<div class="form-group mb-4">
<label for="number">Course number:</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon2"><span class="fas fa-door-open "></span></span>
<input type="text" name="number" class='form-control' required>
</div>
</div>
<div class="form-group mb-4">
<label for="number">Course desciption:</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon2"><span class="fas fa-door-open "></span></span>
<input type="text" name="desc" class='form-control' required>
</div>
</div>
<div class="form-group mb-4">
<label for="number">Final grade:</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon2"><span class="fas fa-door-open "></span></span>
<input type="text" name="grade" class='form-control' required>
</div>
</div>
<div class="row mb-5 mb-lg-5">
<div class="col-lg-4 col-md-6">
<div class="form-group mb-4">
<div class="mb-3">
<span class="fw-bold">Currently Enrolled</span>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="checked">
</div>
</div>
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary" name="add_course" value="Create Property">Add course</button>
</div>
</form>
</div>
</div>
</div>
both files have the same CSS and JS applied to them, so what am I doing wrong?