在这里提供一个简单layer遮罩层，想深入了解可以进入 layer官网 多多学习哦。
先看下HTML页面代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>layer遮罩层</title> <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/csd97/H-ui.min.css" /> </head> <body> <center> <a href="javascript:;" onclick="easy()">点我</a> </center> </body> </html> <script type="text/javascript" src="__ROOT__/Public/admin/lib/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="__ROOT__/Public/admin/lib/layer/2.4/layer.js"></script> <script> function easy(){ var content= '<form action={:U(actInsGoods)} method="post" class="form form-horizontal" id="form-member-add">' + '<div class="row cl">' + '<label class="form-label col-xs-4 col-sm-3">名称</label>' + '<div class="formControls col-xs-8 col-sm-9">' + '<input type="text" class="input-text" name="name">' + '</div>' + '</div>' + '<div class="row cl">' + '<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">' + '<input class="btn radius" type="submit" value="提交">' + '<input class="btn radius layui-layer-close" type="submit" value="取消">' + '</div>' + '</div>' + '</form>'; layer.open({ type: 1, area: ['400px','300px'], fix: false, //不固定 maxmin: true, shade:0.4, title: '标题', content: content }); } </script>
页面的内容只需拼接进去就行，样式可以自己定义，也可以参考下代码中的示例
下面看下运行结果
layer.js 可以从 layer官网下载一份 ， layer弹出组件 中也有非常好的示例
这里的样式借用 H-ui前端框架的，也是比较实用，强大的。
以上就是简单的遮罩层，比较粗糙，仅供参考。