Закрываем попап по оверлею

44

AlexGr4

9 марта 2016, 12:51

903

Подскажите пожалуйста как закрыть попап кликом по оверлею(за пределами окна)? Я сделал по крестику, а вот как по оверлею не пойму. Пробовал через find с добавлением дополнительного дива overlayppclose, но тогда попап закрывался кликая по самому окну.

<div class="overlayppclose">

   <div class="overlaypp">

      <div class="panelpp">

       <div class="closepp"></div>

        <p>Лайтбокс тест</p>

      </div>

     </div>

    </div>

Мне же надо только по оверлею и по крестику.

Песочница тут http://goo.gl/gJQvSP

TA

116

TiA

9 марта 2016, 14:13

#1

Это делается достаточно просто:


$(".closepp, .overlaypp").click(function(e) {

	if (e.target == this) {

		$(".panelpp, .overlaypp").animate({opacity: 'hide'}, "slow");

	}

});

Профессиональная верстка и разработка сайтов на WordPress (http://www.maultalk.com/topic139110s0.html)

AG

44

AlexGr4

9 марта 2016, 14:17

#2

TiA, вы бы могли объяснить принцип работы вашего скрипта?

TA

116

TiA

9 марта 2016, 14:32

#3

Я добавил проверку элемента, который вызвал событие. Это помогает исключить срабатывание при всплывании. Подробнее в документации: https://learn.javascript.ru/event-bubbling

1

AG

44

AlexGr4

9 марта 2016, 14:34

#4

TiA, спасибо. буду разбираться!

В 2023 году 36,9% всех DDoS-атак пришлось на сферу финансов

Зачем быть уникальным в мире, где все можно скопировать