Есть тривиальная задача - скрывать элемент, при клике вне этого самого элемента.
Скрытие и появление элемента тоглиться классом open.
Варианты, которые я использовал:
document.addEventListener('click', function(e) {
// console.log(e.target);
// var target = e.target;
var its_popup = Boolean(e.target == popup || popup.has(e.target));
var popup_is_open = $('.contact-popup').hasClass('open');
console.log(its_popup); //при проверке всегда выдает true, даже при клике вне блока!
console.log(popup_is_open);
if (!its_popup && popup_is_open) {
$('.contact-popup').toggleClass('open');
}
});
///////
$(document).mouseup(function (e) {
console.log(e.target);
var container = $(".contact-popup__block");
if (container.hasClass('open') && container.has(e.target).length === 0){
// $(".contact-popup").hide();
// container.hide();
$(".contact-popup").toggleClass('open');
}
});
//Весь JS код
$(document).ready(function(){
// var checkbox = $('#checkbox');
$('#checkbox').click(function() {
$(this).toggleClass("checked");
});
});
//popup form open
$(document).ready(function(){
var popBtn = $("#contact-popup-btn");
popBtn.click(function(){
$('.contact-popup').toggleClass('open');
});
})
//popup form close
$(document).ready(function(){
var closeBtn = $("#contact-popup-close");
closeBtn.click(function(){
$('.contact-popup').toggleClass('open');
});
})
var popup = $('.contact-popup__block');
$(document).click(function(e){
var popBtn = $("#contact-popup-btn");
if ( !popBtn.is(e.target) && !popup.is(e.target) && popup.has(e.target).length === 0 ) {
popup.toggleClass('open');
}
});
// document.addEventListener('click', function(e) {
// // console.log(e.target);
// // var target = e.target;
// var its_popup = Boolean(e.target == popup || popup.has(e.target));
// var popup_is_open = $('.contact-popup').hasClass('open');
// console.log(its_popup);
// console.log(popup_is_open);
// if (!its_popup && popup_is_open) {
// $('.contact-popup').toggleClass('open');
// }
// });
// $(document).mouseup(function (e) {
// console.log(e.target);
// var container = $(".contact-popup__block");
// if (container.hasClass('open') && container.has(e.target).length === 0){
// // $(".contact-popup").hide();
// // container.hide();
// $(".contact-popup").toggleClass('open');
// }
// });
//success nofity on send
$(document).ready(function(){
var submit = $("#contact-submit-btn");
submit.click(function(e){
e.preventDefault();
$('.success-popup').toggleClass('open');
});
});
HTML
<!-- popup form -->
<button class="header__top-contact-btn" id="contact-popup-btn">Заказать звонок</button>
<div class="contact-popup">
<div class="contact-popup__overlay" id="contPopupOverlay"></div>
<div class="contact-popup__block">
<button class="contact-popup__btn-close" id="contact-popup-close"><img src="img/svg/exit.svg" alt="x"></button>
<p class="contact-popup__title">Оставить заявку</p>
<p class="contact-popup__descr">После подачи заявки с вами свяжется <br>наш менеджер</p>
<?php
$pos = 1;
include "blocks/contact_form.php";
?>
</div>
</div>
<!-- -->
