关于模态框点击空白处关闭的解决方法

一般做模态框的时候会要求,点击除了内容的空白处关闭模态框,试了好几种方法,发现不能完全实现此种效果,原来是因为出现了点击触发的冒泡事件:

    $('#modal').click(function(){
            $('#modal').hide();
        });
        $('.content').click(function(e){
            e.stopPropagation();    //阻止事件向上冒泡,不让其执行父级#modal的事件 
     });

当模态框显示的时候一般不允许body部分网页的滚动,要实现效果,需要在莫泰框显示的时候加上:$("body,html").css({"overflow":"hidden","height":"100%"});

然后在模态框隐藏的时候还原:$("body,html").css({"overflow":"visible"});

原文地址:https://www.cnblogs.com/moumou0213/p/6825922.html