Задать вопрос
weranda
@weranda
javascript

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

Приветствую

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

Подскажите пожалуйста где и что я упустил и как исправить логику работы закрытия окна?
  • Вопрос задан
  • 8268 просмотров
6 комментариев
Подписаться 1 Оценить 6 комментариев
Решения вопроса 2
@Neyury
Советую почитать про всплытие и перехват

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

При каждом событии вам нужно проверять где оно произошло, элемент на котором было вызвано событие можно получить через event.target
Ответ написан
Комментировать
Комментировать
alone_lion1987
@alone_lion1987
Веб-разработчик
https://jsfiddle.net/pgqytmw4/10/

Код разберете сами, если что не понятно, — спрашивайте в комментариях
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ответы на вопрос 4
0example
@0example 
// close modal
$('.modal').click(function () {
    $('.cover, .modal, .content').hide();
});

В этом куске кода у вас как раз указано, что если вы жмете на модальное окон, то происходит закрытие.
Ответ написан
1 комментарий
1 комментарий
@GreatRash
Смысл модального окна в том, чтобы его было невозможно закрыть никаким способом кроме одного: клик в кнопку "ок"/"отмена". Классический пример модального окна - alert();
Ответ написан
5 комментариев
5 комментариев
bob_cody
@bob_cody
Скрыть элемент при клике за его пределами
Ответ написан
Комментировать
Комментировать
Krasnodar_etc
@Krasnodar_etc
avito front
Я бы предложил не сделать подложку внутри modal , но на одном уровне с content . Т.е. как раз затемнённую область сделать подложкой. И ловить клики на неё, а не на всё окно.

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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать парсер
26 апр. 2024, в 07:47
2000 руб./за проект
Devops для видео сервиса
26 апр. 2024, в 06:46
1000 руб./в час
Найти ошибку flutter_map
26 апр. 2024, в 05:31
1000 руб./за проект
Ещё заказы