切换弹出窗口并在外部单击时切换它(Toggle a popup and toggle it when clicked outside)

切换弹出窗口并在外部单击时切换它(Toggle a popup and toggle it when clicked outside)

我有一个问题，

我试图用toggleClass进行弹出切换。 然而，我也制定了一个规则，我从StackOverflow获得，当点击外面时，弹出窗口消失。

然而，当我点击按钮登录它出现，但我不能再使用登录按钮消失。 但我已经制定了规则：

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

然而，似乎他忽略了......

或许你们可以发现我看不到的问题。

HTML

<div id="usermenu"> <div class="inloggen"><h2 class=" swe-editable" _sweid="17" _sweclass="nl swe swe-snippet swe-h2 "> Inloggen</h2> this is the popup! <p>&nbsp;</p> <p>&nbsp;</p> <p>Wachtwoord vergeten? <a href="#">Klik hier</a>.</p></div> </div> <ul class="menu"> <li class="first"><a href="#" id="inloggen">login</a></li> </ul>

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'); };

---

我试过了什么？ 我试图在函数中添加一个异常，当div在div之外点击时使div消失，但这似乎反过来了。

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

更新： 我在进度中进一步了解并将mouseup更改为mousedown并更改了函数的顺序。 这使我更接近解决方案，但它还没有完美地工作。

$(document).mousedown(function (e) { var container = $('.inloggen'); if (container.has(e.target).length === 0) { container.removeClass('active'); } }); $('a#inloggen').click(function() { $('.inloggen').toggleClass('active'); });

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

I have a issue,

Im trying to make a popup toggle with toggleClass. However i also made a rule that i got from StackOverflow that makes the popup dissapear when clicked outside.

However when i click the button login it appears, but i cant make it dissapear with the login button anymore. But i have set the rule :

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

However it seems like he is ignoring that...

Prehaps you guys can spot what the issue is that i can not see.

HTML

<div id="usermenu"> <div class="inloggen"><h2 class=" swe-editable" _sweid="17" _sweclass="nl swe swe-snippet swe-h2 "> Inloggen</h2> this is the popup! <p>&nbsp;</p> <p>&nbsp;</p> <p>Wachtwoord vergeten? <a href="#">Klik hier</a>.</p></div> </div> <ul class="menu"> <li class="first"><a href="#" id="inloggen">login</a></li> </ul>

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'); };

---

What have i tried? 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

最满意答案

我相信一种更简单的方法来完成你想要做的事情，就是创建一个可以切换弹出窗口的空白div。 基本上它像弹出窗口一样隐藏，当点击登录链接时，让掩码div <div class="mask"></div>显示，但是在z-index:-1; 。 这样，页面上的链接仍然被识别为链接，但div仍然是可点击的。

这是代码的新版本，实现了建议的更改： 链接

I believe an easier way to accomplish what you're trying to do, would be to create a blank div which can toggle the popup. Basically have it hidden like the popup, and when the login link is clicked, have the mask div <div class="mask"></div> display, but at z-index:-1;. That way the links on the page are still recognised as links, but the div is still clickable.

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