Переключить всплывающее окно и переключить его при нажатии на него

У меня проблема,

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

Однако, когда я нажимаю кнопку входа в систему, она появляется, но я не могу заставить ее исчезнуть с помощью кнопки входа в систему. Но я установил правило:

$('a#inloggen').click(function() {
    $('.inloggen').toggleClass('active');
});

Однако кажется, что он игнорирует это ...

Предположим, вы, ребята, можете понять, в чем проблема, которую я не вижу.

<Сильный> HTML

<div id="usermenu">
<div class="inloggen">

Inloggen

this is the popup!

 

 

Wachtwoord vergeten? Klik hier.

</div> </div>

<Сильный> jQuery

$('a#inloggen').click(function() {
    $('.inloggen').toggleClass('active');
  });

  $(document).mouseup(function (e)
  {
      var container = $('.inloggen');

      if (container.has(e.target).length === 0)
      {
          container.removeClass('active');
      }

  });

  if ($('#project_user_loginform-name').hasClass('error') || $('#project_user_loginform-password').hasClass('error')) {
    $('.inloggen').addClass('active');
  };




Что я пробовал?
I tried to add a exception to the function that makes the div dissapear when clicked outside the div but this just seems to reverse the progress.

var container2 = $('a#inloggen');
if (container.has(e.target).length === 0 && container2.has(e.target).length !== 0)

UPDATE :
I got a bit further in the progress and changed mouseup to mousedown and changed the order of the functions. This gives me a bit closer to the solution however its not working perfectly yet.

$(document).mousedown(function (e)
  {
      var container = $('.inloggen');

      if (container.has(e.target).length === 0)
      {
          container.removeClass('active');
      }

  });

  $('a#inloggen').click(function() {
    $('.inloggen').toggleClass('active');
  });

Example
http://codepen.io/anon/pen/ghpwr

1
nl ja de
Сделайте себе одолжение и используйте CSS3 для низкоуровневых вещей, подобных этому.
добавлено автор jakenberg, источник
Я могу ошибаться, но не совместим с CSS3 с IE8? Мне показалось, что я успешно помню его, когда IE8 был впервые выпущен. Посмотрите на создание IE-условных выражений и наличие отдельных таблиц стилей для IE. Это сделает вашу жизнь намного легче.
добавлено автор jakenberg, источник
@ jsksma2 Это сайт, который должен быть совместим с IE8. Я использую CSS3 в основном.
добавлено автор Ladineko, источник
@ jsksma2 Насколько я знаю, CSS3 совместим с IE с версии 9.
добавлено автор Ladineko, источник

2 ответы

Кажется, что следующая строка разбивает переключатель, хотя я не совсем понимаю, почему.

if (container.has(e.target).length === 0) {
  container.removeClass('active');
}

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

0
добавлено
Проблемная проблема не так ли? Я занимался этой проблемой уже более 1 часа ... и до сих пор никаких результатов.
добавлено автор Ladineko, источник

Я считаю, что более простой способ выполнить то, что вы пытаетесь сделать, - создать пустой div, который может переключать всплывающее окно. В основном, он скрыт, как всплывающее окно, и когда щелкнули ссылку для входа, отобразите маску div <div class = "mask"> </div> , но в z-index: -1; . Таким образом, ссылки на странице по-прежнему распознаются как ссылки, но div по-прежнему доступен для кликов.

Here's the new version of the code, with the suggested changes implemented: link

0
добавлено
Возможно, вы пропустили мой css, у маски положение абсолютное.
добавлено автор Graham Walters, источник
Хорошая попытка жесткая, но на реальном сайте usermenu намного меньше ...., что делает маску div только занимающей часть сайта, поскольку она имеет позицию: relative;
добавлено автор Ladineko, источник
Он действительно работал, когда я размещал маску div вне сайта ... однако она мешала множеству других ссылок/элементов на сайте. Неправильное решение.
добавлено автор Ladineko, источник
Я этого не сделал. Но у родителя есть родственник ... так что абсолют смотрит на usermenu, который является маленькой коробкой на большом сайте. Когда я выхожу из него, кажется, он работает на определенных участках сайта.
добавлено автор Ladineko, источник
Я снова посмотрел на ваш ответ, и я справился с несколькими изменениями, чтобы исправить проблему ...
добавлено автор Ladineko, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing