layer遮罩层简单的遮罩层

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

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

相关阅读:
自己常用的数据库操作语句
我被SQL注入撞了一下腰
分页
reset.css
创建对象的多种方式
js 数组去重
学习JS防抖【节流】
localStorage.js
vue 项目移动端使用淘宝自适应插件环境配置
Vue项目搭建

原文地址：https://www.cnblogs.com/csd97/p/8085087.html

layer遮罩层 简单的遮罩层

layer遮罩层简单的遮罩层