Почему окно открывается при клике по любому элементу?

Question

[cazumbra]

Есть вот такой скрипт который открывает и закрывает окно с формой подписки. В первой части кода окно закрывается при клике вне элемента #mc_embed_signup. Все работает, но окно теперь и открывается при нажатии вне элемента. То есть на любом месте сайта... не очень силен в JS. Может кто помочь?

$(document).on('click', function(event) { 
if (!$(event.target).closest('#mc_embed_signup').length) {    
  $('.subscribe').slideToggle('hide');
  }
  $body.removeClass('subscribe-fullscreen');
    event.preventDefault();
    event.stopPropagation();
});

$('.subscribe-open').on ('click', function(event) { 
   $body.addClass('subscribe-fullscreen');
  $('.subscribe').slideToggle('show');
  event.preventDefault();
  event.stopPropagation();
});

Answer 1

[coderisimo]

А что такое $body ?

Comments

[cazumbra]

Определение переменной не скопировал. Это тег body сайта. Проблема не в этом

[coderisimo]

cazumbra, я обращаю внимание на все странности.

Вот здесь когда вы кликаете в любом месте страницы вы уверены что будет в наличии
#mc_embed_signup?
Соответственно покажется диалог, если перед этом он был скрыт

if (!$(event.target).closest('#mc_embed_signup').length) {    
  $('.subscribe').slideToggle('hide');
  }

[cazumbra]

coderisimo, как тогда переписать код, чтобы все работало?

[coderisimo]

cazumbra, я сейчас немного в спортзале. Вернусь домой - гляну.
Было бы удобно сделай вы codepen с этим примером и добавь ссылку в вопрос. Это экономит время желающим помочь.

[coderisimo]

cazumbra, в общем ваяйте codepen с этим примером , тут еще несколько странных моментов )) нужно видеть всю разметку.

[cazumbra]

coderisimo, вот codepen. Со стилями не стал заморачиваться. Эффект собственно тот же. Открывается и закрывается окошко по клику по любому месту, а должен только закрываться таким образом, а открываться по клику на кнопку "нажмите")

[coderisimo]

cazumbra,
?

[cazumbra]

coderisimo, а если окно открывается на всю страницу? нужно было все таки заморочиться с css) теперь с вашеим кодом работать не будет потому что остается открытым все окно .subscribe

[coderisimo]

cazumbra,
ну вот... опять задача иная чем в вопросе.
Не проблема. Можно сделать так что при клике на форме оно тоже будет закрываться, а на полях нет. Одну строчку поменять, но это не слишком логично для клиента. Он кликнул на форме , а она внезапно закрылась.
Вы не хотите просто сделать стандартный крестик в углу? Тогда все буде ясно. И отслеживать клики ВНЕ рабочей области и закрывать. Типа такого . -

[coderisimo]

cazumbra,
либо , если хочется без КРЕСТИКА , можно вот так .(Я специально раскрасил разными цветом форму и остальное пространство)

[cazumbra]

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

[coderisimo]

cazumbra, ну и смотрите мой последний вариант.

[cazumbra]

coderisimo, это работает! спасибо! я заметил, что и мой первый код нормально работает, если slidetoggle поменять на slideup и slidedown

[coderisimo]

cazumbra,

1) slideToggle() - меняет состояние на противоположное. если было открыто- закрывает и наоборот
2) если у вас единственный элемент на странице - используйте id вместо class
3) в slideToggle('hide') и slideToggle('show') - 'hide' , 'show' - не имеют смысла. Там первый параметр это duration - продолжительность. Туда передается либо число миллисекунд , например 560 , либо строка ("fast" или "slow"). Можно ничего не передавать, как в моем примере. Будет использоваться значение по умолчанию.
4) Если вопрос решен, отмечайте , как решенный. Возможно, пригодится кому-то еще
5) Создавая вопрос всегда старайтесь прикрепить код с песочницей. Код максимально описывающий проблему. Это облегчает задачу тем, кто помогает и демонстрирует ваше уважение к ним :)

Удачи