Alexander3928,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: rgba(232, 169, 10, 0.357);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.button {
border: none;
background: none;
border-radius: 10px;
border: 5px solid red;
font-size: 30px;
}
.button:focus {
outline: none;
}
.modal {
width: 500px;
height: 350px;
opacity: 0;
visibility: hidden;
background-color: rgba(22, 232, 40, 0.618);
}
.container {
height: 100%;
}
.content {
height: 100%;
}
.div {
width: 70%;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
._active {
opacity: 1;
visibility: visible;
}
#butt.open {
opacity: .3;
}
</style>
</head>
<body>
<div class="div">
<button class="button" id="butt">open modal</button>
</div>
<script>
const butt = document.querySelector(".button");
const div = document.querySelector(".div");
butt.addEventListener("click", () => {
if (butt.classList.contains("open")) return;
butt.classList.add("open");
function modal() {
let obj_modal = `
<div class="modal">
<div class="container">
<img src="./game_project_web/src/IMG/blog-image/Layer 38.jpg" alt="" class="content">
<button class="button_modal">CLOSE</button>
</div>
</div>
`;
div.insertAdjacentHTML("beforeend", obj_modal);
}
modal();
const modal_over = document.querySelector(".modal");
const modal_close = modal_over.querySelector(".button_modal");
function active_class() {
modal_over.classList.add("_active");
}
setTimeout(active_class, 1000)
modal_close.addEventListener("click", () => {
modal_over.classList.remove("_active");
function close_modal() {
modal_over.remove();
butt.classList.remove("open");
}
setTimeout(close_modal, 2000);
});
});
</script>
</body>
</html>