|
Сообщение от Alexander3928
|
|
Может я забыл что-то указать для этого?
|
Возможно ты грешить не на того...
В твоем варианте даже само событие "добавить модальный элемент" не срабатывает.
Наверное сам клик на кнопке убивает вот это
|
Сообщение от Alexander3928
|
div.innerHTML += obj_modal;
|
Вот так будет работать...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
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;
}
.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;
}
</style>
<script>
</script>
</head>
<body>
<div class="div">
<button class="button" id="butt">open modal</button>
<div class='container'></div>
</div>
<script>
const div = document.querySelector(".div .container");
const butt = document.querySelector(".button");
butt.addEventListener("click", () => {
function modal() {
const 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.innerHTML = obj_modal;
}
modal(document.querySelector(".div"));
function active_class() {
const modal_over = document.querySelector(".modal");
modal_over.classList.add("_active");
}
setTimeout(active_class, 1000)
const modal_close = document.querySelector(".button_modal");
const modal_over = document.querySelector(".modal")
modal_close.addEventListener("click", () => {
modal_over.classList.remove("_active");
function close_modal() {
div.removeChild(modal_over);
}
setTimeout(close_modal, 2000);
});
});
</script>
</body>
</html>