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类元素。因此，点击窗口不会关闭它。

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

Answer 4

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

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

4 个答案: