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前端框架的，也是比较实用，强大的。

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

 

posted @ 2017-12-22 11:14  曹士达  阅读(16413)  评论(0)  编辑  收藏  举报