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

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

以下是网页链接，可查看实时代码（如果有帮助）：

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

<!---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--->

//

任何帮助都将不胜感激

使用这个简单的代码

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

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

---

在第一个定义隐藏它的类名时，请试试这个，我刚刚为登录对话框做了一个示例，您也可以为注册对话框做同样的操作

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

---

您可以在Maulik的回答中使用e.target.id，但当您单击弹出框的某个元素时，它可能不起作用，因为该元素不能委托给容器

你基本上需要两件事：

在弹出对话框中，跟踪鼠标在内和外悬停

为文档的鼠标向上事件绑定事件处理程序，并检查光标是否在弹出窗口之外。如果光标在弹出窗口外，请将其关闭 跟踪鼠标悬停：注意选择器是[id$='box'，因此它匹配所有以'box'结尾的id。请确保更改此设置，因为它适合您的应用程序

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

绑定文档的鼠标向上事件：

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

---

您需要检查

loginbox

是否不是已单击元素的祖先。注意：鼠标单击并不是用户“离开”对话框的唯一方式。例如，他们可能会使用tab键。发布了一个编辑建议，以获得这个很棒的答案。将

#loginbox

更改为

[id$='box']

Cool。确保捕获第二个

#登录框