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

使用这个简单的代码

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 2

类名请试试这个，我刚刚做了登录对话框的例子，你可以做同样的注册对话框

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

Answer 3

您可以像Maulik的回答一样使用e.target.id，但当您单击弹出框中的一个元素时，可能无法将其委托给容器。

你基本上需要两两件事：

1. 跟踪鼠标上的弹出式对话框徘徊在和出。
2. 绑定文档的鼠标向上事件的事件处理程序，并检查光标是否在弹出窗口之外。如果光标位于弹出窗口之外，请关闭它。

追踪鼠标悬停：注意，选择器[ID $ =“盒子”]，所以它与“盒子”结束所有的ID相匹配。确保你改变它，因为它适合你的应用程序。

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

约束力的文件的鼠标向上事件：

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