jQuery-在外部单击时关闭对话框

Question

每次用户单击“注册”或“登录”链接时，都会出现一个弹出窗口以继续。 但是，如果用户要关闭弹出窗口，则应该再次单击“登录”或“注册”链接。 如果在网页外部单击，是否可以关闭弹出窗口？

以下是该网页链接，以查看实时代码（如果有帮助的话）： http : //bit.ly/1oagBgx

这是我网页上的下拉菜单的代码：

<!---dropdown--->
<script type="text/javascript">
    //<![CDATA[
    function showlogin(){
        $("#loginbox").animate({"height": "toggle"}, { duration: 800 });
        $("#regsiterbox").hide();
        $(".login a").css("color", "#bf1e1a");
        $(".create-account a").css("color", "#747474");
    }
    function showregister(){
        $("#regsiterbox").animate({"height": "toggle"}, { duration: 800 });
        $("#loginbox").hide();
        $(".create-account a").css("color", "#bf1e1a");
        $(".login a").css("color", "#747474");
    }
    //]]>
</script>
<!---dropdown--->

任何帮助，将不胜感激 ！

Answer 1

您可以像在Maulik的答案中那样使用e.target.id，但是当您单击不能委托给容器的弹出框的元素时，它可能不起作用。

您基本上需要两件事：

1. 跟踪鼠标在弹出对话框中的移入和移出 。
2. 为文档的鼠标向上事件绑定事件处理程序，并检查光标是否在弹出窗口之外。 如果光标在弹出窗口之外，则将其关闭。

跟踪鼠标悬停：请注意，选择器为[id $ ='box']，因此它匹配所有以'box'结尾的ID。 确保更改它以适合您的应用程序。

var insideMenu = false;
$("[id$='box']").hover(
    function(){
        insideMenu  = true;
    },
    function(){
        insideMenu  = false;
    }
);

绑定文档的mouse-up事件 ：

$(document).mouseup(function(){
     if(!insideMenu){
        $("#loginbox").hide();
      }
});

Answer 2

使用这个简单的代码

var clickNo = 2;
    function yourFunction()
        {
        switch (clickNo) 
            {
            case 1:
                // Function : This will be onClick
                // For ex : document.getElementById('id').className = "hiddenClass";
                clickNo = 2
                    return(false);
            case 2:
                // Function : This will be byDefault
                // For ex : document.getElementById('id').className = "visibleClass";
                clickNo = 1
                    return(false);
            }
        }

在第二种情况下，定义可见的类名称

并在第一个中定义隐藏它的类名

Answer 3

请尝试一下，我只是以登录对话框为例，您可以为注册对话框做同样的事情

$(document).click(function(e) {
  if( e.target.id != 'loginbox') {
    $("#loginbox").hide();
  }
});