close modal

by kneidels

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").show();			
		})
	
});