close modal

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <h1>Hello, world!</h1>

 <p class="triggerlist">The packages will be sent to<span class="d-none d-lg-inline">:</span> </p>


 <div class="modal " id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">

   <div class="modal-dialog modal-dialog-scrollable">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="exampleModalLabel">Package Recipients</h5>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
         TEST CONTENT

       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

       </div>
     </div>
   </div>
 </div>

CSS

body {
  font-size: 1.0rem;
  padding: 20px;
}

.triggerlist {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}

JavaScript

$(function() {

  $(".triggerlist").click(function() {
    $("#exampleModal").modal("show");
  })

});