Как перехватить клик вне модального окна bootstrap?

Question

[Мурад Джелилов]

Добрый день. Как можно перехватить клик вне модального окна bootstrap?
Пытался сделать так:

$('#modalfoto').on('hidden.bs.modal', function (e) {
    alert('Модальное окно!');
});

и так:

$( ".modal-backdrop" ).click(function() {
  alert( "Модальное окно!" );
});

Ни фига не заработал

Answer 1

[Евгений Петров]

Способ «в лоб» — смотрим на предков в поисках окна

$(document).on('click', function () {
	if (!$(this).closest('#modalfoto').length) {
		console.log('Это — не моя клетка!');
	}
});

Способ поизящнее — пользуемся последовательностью узлов при всплытии. Поскольку через элемент, называемый «модальным окном», событие пройдёт по-любому раньше, чем через document, то мы цепляем вагончик и в document лишь проверяем его наличие.

$(document)
	.on('click', '#modalfoto', function (e) {
		e.modalWindow = true;
	})
	.on('click', function (e) {
		if (!e.modalWindow) {
			console.log('Это — не моя клетка!');
		}
	});

Answer 2

[Алексей Николаев]

На modal-backdrop не получилось из-за того, что над ним довлеет #modalfoto. Поэтому я бы добавил событие щелчка по #modalfoto, в которое включил бы проверку на координаты щелчка. Если пользователь щелкнул за пределами div, обрабатываем событие, если нет - ничего не делаем.
Набросал примерную схему действий.

$("#modalfoto").click(function(e){
	var modalDialog = $(this).find('.modal-dialog');
	var xOffset = modalDialog.offset().left;
	var yOffset = modalDialog.offset().top;
	if((e.pageX < xOffset || e.pageX > xOffset + modalDialog.width()) &&
	   (e.pageY < yOffset || e.pageY > yOffset + modalDialog.height()) {
	   // какие-то действия
	}
});

Comments

[Мурад Джелилов]

@heian у меня с яваскриптом не очень.
Пишу это в консоли выводит ошибку
Uncaught TypeError: Cannot read property 'left' of undefined

кстати, там скобка не закрыта, после if.