igorperegudov
@igorperegudov
Frontend-developer

Как закрыть попап по клику вне его?

Есть попап, как закрыть его по клику вне его?
<div id="boxes">
        <div id="dialog" class="window">
            <form class="main-form">
                <div class="form-close link close top">&times;</div>
                <div class="form-group">
                    <input type="name" class="form-control" id="InputName" placeholder="Ваше имя"> </div>
                <div class="form-group">
                    <input type="tel" class="form-control" id="InputMail" placeholder="" value="+7"> </div> <span>В какое время вам позвонить?</span>
                <div class="wrap-time-to-work">
                    <div class="time-to-work text-center">
                        <input type="radio" id="r1" name="rr" checked />
                        <label for="r1">В любое</label>
                    </div>
                    <div class="time-to-work text-center">
                        <input type="radio" id="r2" name="rr" />
                        <label for="r2">9–13</label>
                    </div>
                    <div class="time-to-work text-center">
                        <input type="radio" id="r3" name="rr" />
                        <label for="r3">13–18</label>
                    </div>
                    <div class="time-to-work text-center">
                        <input type="radio" id="r4" name="rr" />
                        <label for="r4">18–21</label>
                    </div>
                </div>
                <button type="submit" class="btn contacts-btn">Заказать звонок</button>
            </form>
        </div>
    </div>


Есть открытие закрытие его:
$(document).ready(function() {   
    $('a[name=modal]').click(function(e) {
    e.preventDefault();
    var id = $(this).attr('href');
    var winH = $(window).height();
    var winW = $(window).width();
    $(id).fadeIn(500); 
    });
    $('.window .close').click(function (e) { 
    e.preventDefault();
    $('.window').hide();
    }); 
   });
  • Вопрос задан
  • 594 просмотра
Решения вопроса 1
igorperegudov
@igorperegudov Автор вопроса
Frontend-developer
$(function($){
	$(document).mouseup(function (e){ // событие клика по веб-документу
		var div = $("#dialog"); // тут указываем ID элемента
		if (!div.is(e.target) // если клик был не по нашему блоку
		    && div.has(e.target).length === 0) { // и не по его дочерним элементам
			div.hide(); // скрываем его
		}
	});
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
kimono
@kimono
Web developer
Примерно так:
$(document).on('click', function(e){
  if($('.window').is(':visible') && !$(e.target).is('.window'){
    $('.window').hide();
  }
});
Ответ написан
@GreatRash
Если предположить, что попап - это #boxes

$('#boxes').on('click', function(e) {
  e.stopPropagation();
});

$(document).on('click', function() {
  $('#boxes').hide();
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы