layer遮罩层简单的遮罩层

最新推荐文章于 2024-05-14 06:42:34 发布

weixin_33856370

最新推荐文章于 2024-05-14 06:42:34 发布

阅读量2.9k

点赞数

文章标签： javascript 前端框架 ViewUI

原文链接：http://www.cnblogs.com/csd97/p/8085087.html

版权

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

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

转载于:https://www.cnblogs.com/csd97/p/8085087.html

weixin_33856370

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layer遮罩层简单的遮罩层

在这里提供一个简单layer遮罩层，想深入了解可以进入layer官网多多学习哦。先看下HTML页面代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>layer遮罩层</title> &...
复制链接

扫一扫