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

你基本上需要两件事:

1. 跟踪鼠标悬停在弹出对话框中进入和离开。
2. 为文档的鼠标弹起事件绑定(bind)一个事件处理程序，并检查光标是否在弹出窗口之外。如果光标在弹出窗口之外，请关闭它。

跟踪鼠标悬停:请注意选择器是 [id$='box'] ，因此它匹配所有以 'box' 结尾的 ID。请确保根据您的应用对其进行更改。

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

绑定(bind)文档的鼠标弹起事件:

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