标签：body loading Modal classList Image JavaScript modalContent modal document
<!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>
标签：body,
loading,
Modal,
classList,
Image,
JavaScript,
modalContent,
modal,
document
From： https://www.cnblogs.com/HatcherBlogs/p/17178434.html