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

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

巴特西

layer遮罩层简单的遮罩层

最新文章

热门文章

巴特西

layer遮罩层 简单的遮罩层

最新文章

热门文章

layer遮罩层简单的遮罩层