首页 > 代码库 > js点击任意区域弹出层消失，js点击弹出层之外的任意区域弹出层消失,常见弹层的封装

js点击任意区域弹出层消失，js点击弹出层之外的任意区域弹出层消失,常见弹层的封装

2024-11-01 13:13:39   208人阅读

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            *{margin:0;padding:0;}
            .warp{overflow:hidden;}
            .div1,.div2,.div3,.div4{width:400px;height:100px;margin:20px;background:#000;color:#fff;}
            .div2,.div4{display:none;}
            .fiex{display:none;}
            .div3,.div4{background:red;float:left;margin-top:5px;margin-left:10px;overflow:hidden;}
            .div6,.div6 div{padding:10px;border:1px solid #000;}
            .div7{width:300px;height:50px;background:blueviolet;display:none;}
        </style>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <div class="warp">
            <div class="div1">div1</div>
            <div class="div2">div1显示的内容-点我消失</div>
        </div>
        <div class="warp">
            <div class="div3">div2</div>
            <div class="div4">div2显示内容显示内容显示内容-点我消失</div>
        </div>
        
        <br /><br />
        
        <div class="div6">
            div6内容内容
            <div class="uf">
                .uf 内容 可点击显示 .div7
            </div>
            
        </div>
        <div class="div7">
            换个布局展示 点击我时 不消失
        </div>
        
        <style type="text/css">
            #mb{position:fixed;background:rgba(0,0,0,.4);width:100%;height:100%;top:0;left:0;display:none;}
            .showbox{position:fixed;top:50%;left:50%;width:400px;height:200px;margin-top:-100px;margin-left:-200px;z-index:100;background:#fff;display:none;}
            .close{position:fixed;top:0;right:0;z-index:201;background:red;}
        </style>
        
        <input type="button" class="btn2" name="" id="" value="btn2" />
        <div id="mb"></div>
        <div class="showbox">
            <div class="close">closeBtn</div>
        </div>
        
        
        <script type="text/javascript">
            $(function(){
                $.fn.extend({
                    toggleWin : function(winBox,boolean){
                        //this 点击显示winBox 点击除了this的 其他地方则隐藏winBox
                        //boolean赋值 且 == true 点击除了this和winBox 的 其他地方则隐藏winBox
                        $(this).click(function(ev){
                            $(winBox).show();
                            ev.stopPropagation();
                        });
                        $(document).click(function(e){
                            $(winBox).hide();
                        });
                        if(boolean && boolean==true){
                            $(winBox).click(function(ev){
                                ev.stopPropagation();
                            });
                        }
                    },
                    toggSpecify : function(winBox,closeBar){
                        //this 被点击显示winBox
                        //closeBar被点击则关闭 winBox,默认 closeBar=#mb
                        var winBoxBg = ‘<div id=\"mb\"></div>‘
                        $(this).click(function(){
                            if(!$("#mb")){
                                $("body").append(winBoxBg);
                            }
                            $("#mb,"+winBox).show();
                        });
                        closeBar ? closeBar : closeBar="#mb";
                        $(closeBar).click(function(){
                            $("#mb,"+winBox).hide();
                        });
                    }
                    
                });
                $(".div1").toggleWin(".div2");
                $(".div3").toggleWin(".div4");
                $(".uf").toggleWin(".div7",true);
                $(".btn2").toggSpecify(".showbox",".close,#mb");
                
                
                
            })
        </script>
    </body>
</html>

 

js点击任意区域弹出层消失，js点击弹出层之外的任意区域弹出层消失,常见弹层的封装


联系
我们