0

Здравствуйте.

На странице есть модальное окно, которое содержит форму, а всю оставшуюся часть страницы затемняет. Нужно, чтобы при нажатии на тень форма скрывалась, но у меня форма скрывается даже при нажатии на дочерние элементы <input>, хотя такого не должно быть

пример http://jsfiddle.net/qf6dywkx/

3 ответа 3

1

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

Делаем родительский div для формы и вызываем stopPropagation()

Пример

1

Решение

Всё очень просто: когда вы кликаете на элемент, он "баблится" на верхний кэтчер. Чтобы избежать - достаточно сверить в методе целевой элемент, и кликнутый.

function(event){
  if(event.target == event.currentTarget){
    toggleShaddow();
  }
}

И исправил за Вас названия методов и элементов. Так правильнее.

1
  • Если между тенью и формой будут другие невидимые блоки, то тень не будет пропадать (событие click не дойдет до тени). Такая схема часто используется в Bootstrap Пример: bootply.com/PurZPHfUOg Если нажимать слева/справа от формы, то форма не исчезает, потому что натыкается на невидимые div.row, div.container. Нажатия выше/ниже формы работают как ожидается. Спасибо за ссылку на статью.
    – atom-22
    4 фев 2015 в 6:53
0

Я бы сделал отдельно затенение и поверх него уже div с данными.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.