Как корректно закрыть модальное окно?

Question

[weranda]

Приветствую

Сделал простенькое модальное окно, но не получается его корректно закрыть. Оно закрывается, но закрывается при клике на любую часть, а по идее должно закрываться только при клике вне области контента, т.е. окно не должно закрываться при клике внутри области контента, а только в не его.

Подскажите пожалуйста где и что я упустил и как исправить логику работы закрытия окна?

Comments

[Сергей Тутуков]

https://jsfiddle.net/pgqytmw4/7/ - не на тот селектор вешаешь событие (+ почистил код). Но я бы все равно так не делал

[Сергей Тутуков]

наоборот сделал. Сейчас поправлю

[weranda]

Сергей Тутуков: Суть как раз в том, чтобы оно не закрывалось при клике на контентной части, но закрывалось при клики за пределами контентной части!

[Сергей Тутуков]

https://jsfiddle.net/pgqytmw4/9/

[weranda]

Сергей Тутуков: Спасибо, вроде это то, что нужно.

[weranda]

Сергей Тутуков: Да, все работает так, как и должно. Благодарю вас за помощь!

Answer 1

[Neyury]

Советую почитать про всплытие и перехват

суть в том, что блок content располагается в блоке modal, и если кликнуть по блоку content, то событие всплывет и пройдет через блок modal.

При каждом событии вам нужно проверять где оно произошло, элемент на котором было вызвано событие можно получить через event.target

Answer 2

[Роман]

https://jsfiddle.net/pgqytmw4/10/

Код разберете сами, если что не понятно, — спрашивайте в комментариях

Comments

[Сергей Тутуков]

event.stopPropagation(); - зачем?
$(document).unbind('click'); - а если у меня несколько кликов на $(document)?

[weranda]

Роман Жариков Да, зачем? )

[Роман]

Да, смысла нет в stopPropagation, сорри за неточность :) , улучшенный вариант, — https://jsfiddle.net/pgqytmw4/13/

[Сергей Тутуков]

Роман Жариков:
совет: если делаешь unbind/off на глобальный элементах, то создавай свое событие и отключай его. например click.modal

Answer 3

[Алексей Скляров]

// close modal
$('.modal').click(function () {
    $('.cover, .modal, .content').hide();
});

В этом куске кода у вас как раз указано, что если вы жмете на модальное окон, то происходит закрытие.

Comments

[weranda]

Что предложите изменить в коде?

Answer 4

[GreatRash]

Смысл модального окна в том, чтобы его было невозможно закрыть никаким способом кроме одного: клик в кнопку "ок"/"отмена". Классический пример модального окна - alert();

Comments

[weranda]

У нас с вами разное понимание сути вопроса.

[Neyury]

Суть модального окна в том, чтобы не позволить что то делать с остальной частью страницы, пока оно открыто (было бы странно смотреть видео, на которым висит окно обратного звонка). Кликнув в пустое пространство пользователь дает понять, что он закончил работу с модальным окном.

[GreatRash]

Neyury: Ситуация: я нервный пользователь и постоянно непроизвольно кликаю мышкой по странице, то там то сям, вы мне открыли окно, а я в этот момент кликнул - вся ваша хвалёная "модальность" превратилась в тыкву. Тяжело у нас в стране с UX...

[weranda]

GreatRash: Вы нервный пользователь, а я нервничаю когда на экране появляется модальное окно, вызванное мной и вдруг, осознав, что это окно мне не нужно, я начинаю искать кнопку закрытия окна, которая может быть размещена то там, то сям. Мне спокойнее кликнуть курсором в хорошо знакомое затемненное поле, чтобы окно закрылось.

Тяжело у нас в стране с UX...

Не только у нас или у вас)

[Роман]

alert(); это конечно же мощно...

Answer 5

[bob_cody]

Скрыть элемент при клике за его пределами

Answer 6

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

Я бы предложил не сделать подложку внутри modal , но на одном уровне с content . Т.е. как раз затемнённую область сделать подложкой. И ловить клики на неё, а не на всё окно.

Сейчас не работает, поскольку клик на вложенный элемент вызывает клик и на родителя

Comments

[weranda]

К сожалению, только такой вариант верстки подходит.