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

Question

[Игорь Перегудов]

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

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

Comments

[OVK2015]

Повесить обработчик клика на body и в нем $('.window').hide();

[Игорь Перегудов]

OVK2015: блин, если честно слабовато разбираюсь, возможно вы смогли бы помочь с куском кода?

[OVK2015]

С куском? Легко:

$('body').bind('click', function(event){$('.window').hide();})

[Игорь Перегудов]

OVK2015: блин, всталяю и там и там, не работает (

Answer 1

[Игорь Перегудов]

$(function($){
	$(document).mouseup(function (e){ // событие клика по веб-документу
		var div = $("#dialog"); // тут указываем ID элемента
		if (!div.is(e.target) // если клик был не по нашему блоку
		    && div.has(e.target).length === 0) { // и не по его дочерним элементам
			div.hide(); // скрываем его
		}
	});
});

Answer 2

[Дмитрий Ким]

Примерно так:

$(document).on('click', function(e){
  if($('.window').is(':visible') && !$(e.target).is('.window'){
    $('.window').hide();
  }
});

Comments

[Игорь Перегудов]

$(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();
});
});

Вставляю после своего кода, форма перестает открываться

Answer 3

[GreatRash]

Если предположить, что попап - это #boxes

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

$(document).on('click', function() {
  $('#boxes').hide();
});

Comments

[Игорь Перегудов]

блин, как только добавляю после своего кода, попап перестает открываться (