点击空白隐藏单例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点击空白隐藏</title> <style media="screen"> .full_screen{position: fixed;width: 100%;height: 100%;z-index: 1000;left: 0;top: 0;background: #ddd;} .pop_box{width: 500px;height: 500px;background: purple;margin: 0 auto;display: none;z-index: 1001;position:fixed;left: 30%;} .full_black_bg{background: rgba(0,0,0,.7)!important;filter:Alpha(opacity=80);background: #000;} </style> </head> <body> <button type="button" name="button" class="btn">点击出全屏</button> <div class="pop_box">dsfsdfsdf</div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> //全屏遮罩 var full_screen; jQuery(document).ready(function(){ full_screen=(function (){ var fulled,hideFunc; function fulling(className,onHide){ if(!fulled){ fulled = $('<div class="full_screen"></div>'); fulled.on('click',function(){ if (hideFunc) { var fresult = hideFunc(); if (fresult == false) { return; } } fulled.hide(); }); $(document.body).append(fulled); } if(className){ fulled.addClass(className) }else{ fulled.attr('class','full_screen'); } if(onHide&& typeof(onHide)=='function'){ hideFunc=onHide; } fulled.show(); return fulled; } return fulling; })(); }); //全屏实例化 $('.btn').click(function() { full_screen('full_black_bg',function(){ $('.pop_box').hide(); }); $('.pop_box').show(); }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 点击空白隐藏单例