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，但是当您点击弹出框中无法委托给容器的元素时，它可能不起作用。

你基本上需要两件事：

在弹出式对话框中跟踪鼠标悬停在和 out 。
绑定文档鼠标按键事件的事件处理程序，并检查光标是否在弹出窗口之外。如果光标位于弹出窗口之外，请将其关闭。

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

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

绑定文档的鼠标悬停事件：

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

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

并在First中定义隐藏它的类名

Answer 3

请尝试这个，我刚刚为登录对话框做了示例，你可以为注册对话框做同样的事情

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

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

3 个答案: