<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href=""> <script src="jquery-1.12.1.min.js"></script> <style> div{ 100%; height: 100%; background-color: black; opacity: .8; position: absolute; top:0;} </style> <script> // 方法一： // var createMask=function(){ // return document.body.appendChild(document.createElement("div")); // }; // 方法二： // var mask; // var createMask = function(){ // var mask; // return function(){ // return mask || (mask=document.body.appendChild(document.createElement('div'))) // }(); // }; // 方法三： // var mask; // var createMask = function(){ // if ( mask ) return mask; // else{ // mask = document.body.appendChild( document.createElement('div') ); // console.log(mask); // return mask; // }; // }; // 方法四： var singleton=function(fn){ var result; return function(){ return result || (result=fn.apply(this,arguments)); } }; var createMask=singleton(function(){ return document.body.appendChild(document.createElement('div')); }); $(function(){ $('#btn').click(function(){ createMask(); }); }); </script> </head> <body> <button id="btn">弹层</button> </body> </html>