在这里提供一个简单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前端框架的，也是比较实用，强大的。

以上就是简单的遮罩层，比较粗糙，仅供参考。

 

版权声明：本文为csd97原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/csd97/p/8085087.html