Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Не создает div при повторном нажании кнопки (https://javascript.ru/forum/misc/83296-ne-sozdaet-div-pri-povtornom-nazhanii-knopki.html)

Alexander3928 11.11.2021 10:41
Не создает div при повторном нажании кнопки
 
Добрый день. Есть div который создается при нажании на кнопку, потом добовляются стили через секунду. Когда удаляю этот div с помощью removeChild, все окей по логике, но когда я повторно нажимаю на кнопку которая создает этот div, он не создается. Может я забыл что-то указать для этого?


<div class="div">
      <button class="button" id="butt">open modal</button>
    </div>


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;
}

.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;
}
const div = document.querySelector(".div");
const butt = document.querySelector(".button");

butt.addEventListener("click", () => {

  function modal() {
    let obj_modal = "";
    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);
  });
});

ksa 11.11.2021 11:05
Цитата:
Сообщение от 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>

ksa 11.11.2021 11:14
Или вот так, это уже без контейнера...
<!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>
<script>
const div = document.querySelector(".div");
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.insertAdjacentHTML('beforeend', 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>

рони 11.11.2021 11:51
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>

Alexander3928 12.11.2021 10:27
ksa,
рони,
Спасибо


Часовой пояс GMT +3, время: 15:57.