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

Question

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

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

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

将类.modal添加到页面上的每个弹出框，然后添加以下内容。 单击时，它将隐藏任何带有.modal类的弹出框。

$('body').on('click',function(){
     if(!$(this).hasClass('modal')){
        $(".modal").hide();
     }
});

Answer 2

尝试这个

$('body').on('click',function(){
     if($("#regsiterbox").css('display') != "none"){
           $("#regsiterbox").hide();
     }
     else if($("#loginbox").css('display') != "none"){
          $("#loginbox").hide();
     }
});

Answer 3

您可以按班级识别弹出窗口，我在这里选择了popup 。 每当在其外部单击时，此代码将隐藏popup class元素。 因此，单击窗口不会关闭它。

$("body").click(function() {
    if ($(this).attr("class") != "popup") {
       $(".popup").hide();
    }
});

Answer 4

$('body').on('click',function(event){
  event.stopPropagation();     
  $(".your_popup").hide();
});