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