Как скрыть окно при клике в любом месте, кроме этого окна?

Question

[Михаил Р.]

Всем привет!
И так, есть модальное окно, которое нужно скрыть при:
1. Клике на крестике в самом окне.
2. Клике в любой области страницы, исключая само окно.



Написал такой код:

// скрываем popup окно корзины при клике
    $('#container-system .popup-cart i.fa-times').click(function() {
        $('#container-system .popup-cart').fadeOut();
    });
    $('#container-system').click(function() {
        $('#container-system .popup-cart').fadeOut();
    });

Вопросы:
1. Грамотно-ли написан код? Предполагаю, что нет (опыта пока мало), а если нет, то как правильно?
2. Функции работают, за одним исключением, окно скрывается и при клике на само окно (а этого быть не должно)...

Спасибо!

Answer 1

[iBird Rose]

бинди вот это при открытии окна. только именно при открытии модалки. чтобы не висел клик везде и всегда

$(document).click( function(event){
		if(( $(event.target).closest("#container-system .popup-cart").length ))
		return;
		$('#container-system .popup-cart').fadeOut();
		event.stopPropagation();
	});

Comments

[M-ka]

Плохой вариант при неизвестном количестве возможных попапов... проще фильтровать клики... да и вешать не текущим способом, а засылать в какой то обработчик, который бы разгуливал все события, а не танцевать с бубном над документ клик, вставкой и тп...

[iBird Rose]

M-ka: ну это конкретный пример для ТС. потому что я не знаю как у него устроен код открытия. для себя я бы открывал и закрывал через this.

[iBird Rose]

M-ka: к примеру вот так сделать https://jsfiddle.net/h6m8dprx/

[iBird Rose]

M-ka: а еще для этого случая можно юзать one, чтобы не анбиндить каждый раз https://jsfiddle.net/h6m8dprx/1/

[M-ka]

iBird Rose: one не работает корректно ;) так... для справки.... А через this не при всех случаях возможно... если один и тот же попап может открываться не только кликом но и через неизвестную ф-ю... то хе хе) А если еще все попапы управляются с одного места, то ха... ну да лан) Зато весело провели вечер...

Answer 2

[Антон]

Внутри #container-system на одном уровне с .popup-cart создай еще блок с затеменным фоном (.popup-layout, к примеру), при клике на него пускай скрывается форма. Ну а сам popup-cart свойством z-index подними выше блока с затеменным фоном.

Answer 3

[Андрей Гончаров]

а я бы сделал так:

$("#container-system").children().click(function(e){
	e.stopPropagation();
});

Answer 4

[M-ka]

Поставить глобальную ловлю событий, отфильтровать клики, сравнить элемент с ай ди окна, крестика и прочих элементов(поискать элемент внутри окна), которые проигнорит. Для всего остального, закрыть... Предпочтительнее записать состояние куда то, что бы не обращаться по каждому клику к дереву...

Answer 5

[Егор Живагин]

Вариантов с этим решением тебе уже накидали, я своё тогда не скажу)) Но вот в этом конкретном случае я бы предложил закрывать окошко через n-секунд даже без клика, через SetTimeout . А то некрасивое оно) Ну, лишние клики заставляешь делать там, где это не оюязательно

Comments

[M-ka]

Скрывать по авто плохой вариант, было бы лучше там возможность сразу показать то, что заказано с возможностью правки... Ну а еще вариант, сделать плашку на которой и ловить все клики.... но это же не по фэншую)))

[Егор Живагин]

M-ka: та почему? Это ж просто оповещалка "ура, вы почти купили" ) А показать, поправить - есть корзина же наверняка. Мне было бы впадлу курсор уводить и кликать, лучше бы сама исчезла)) Ну, на вкус и цвет
Можно и плашку) Это первое, что и мне на ум пришло

[M-ka]

Krasnodar_etc: проинформировать пользователя о том, что выбралось и дать на ходу исправить... довольно таки полезно. Вот только без реальных тестов на трафике не сказать о эффективности такового решения... Да и для разных стран будет разный результат. Даже в пределах одной страны... Но довольно таки расстраивает, когда выбираешь один товар, а в результате чуда оказывается другой в корзине или другое количество... Тогда смело можно уходить с такого магазинчика, ибо неизвестно то, сколько раз придется при каждой выборке проходить все повторно или править количества из-за сомнительной адекватности ресурса...

[Егор Живагин]

M-ka: полностью согласен. Очень насущная проблема, поскольку всё чаще веб-студиям всяким лень тестить лишний раз