Здравствуйте.
Дело вот в чем. Решил организовать всплывающее окно после загрузки страницы, и захотелось, чтобы при нажатии на дочернюю темную область закрывался родительский элемент, тобишь чтобы окно и затемнение полностью убиралось. Организовал. Работало. Но потом дополнил код конфетти, и всё поломалось.
Разбираюсь в JS плохо, не могу понять почему не хочет работать.
<div id="sale">
<div class="cat">
Окошко с карточкой-скидкой
</div>
<!--Для конфетти-->
<script src="js/confetti-js/dist/index.min.js"></script>
<canvas id="mycanvas"></canvas>
<script>
var confettiSettings = {
target: 'mycanvas'
};
var confetti = new ConfettiGenerator(confettiSettings);
confetti.render();
React.useEffect(() => {
const confettiSettings = {
target: 'mycanvas'
};
const confetti = new ConfettiGenerator(confettiSettings);
confetti.render();
return () => confetti.clear();
}, [])
</script>
</div>
<script ENGINE="text/javascript">
var delay_popup = 6000;
setTimeout("document.getElementById('sale').style.display='block'", delay_popup);
</script>
<script>
$("canvas").click(function(e) {
if ($(e.target).closest("sale").length == 0) $("sale").css("display", "none");
});
</script>
Руководствовался этим
xiper.net/collect/js-plugins/ui/closepopup
Где ошибка? Как организовать закрытие родителя при клике на конфетти?
