JavaScript Modal Image

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Modal Image</title>
  </head>
  <style type="text/css">
  	.modal {
  	  position: fixed;
  	  z-index: 1;
  	  left: 0;
  	  top: 0;
  	  width: 100%;
  	  height: 100%;
  	  overflow: auto;
  	  background-color: rgba(0,0,0,0.9);
  	  display: flex;
  	  justify-content: center;
  	  align-items: center;
  	}
  	
  	.modal-content {
  	  max-width: 80%;
  	  max-height: 80%;
  	}
  	
  	body.modal-open {
  	  overflow: hidden;
  	}

  </style>
  <body>
	<li id="loading">11111111111111111111</li>
  </body>
</html>
<script type="text/javascript">
const loading = document.getElementById("loading");

loading.addEventListener("click", function() {
  const modal = document.createElement("div");
  const modalContent = document.createElement("img");
  
  modal.classList.add("modal");
  modalContent.classList.add("modal-content");
  
  modalContent.src = "./img/loading.svg";
  
  modal.appendChild(modalContent);
  document.body.appendChild(modal);
  
  document.body.classList.add("modal-open");
  
  modal.addEventListener("click", function() {
    modal.remove();
    document.body.classList.remove("modal-open");
  });
});



</script>