在这里提供一个简单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遮罩层 简单的遮罩层的更多相关文章

  1. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  2. 【Javascript Demo】遮罩层和百度地图弹出层简单实现

    其实想做的就是显示百度地图的弹出层,现在已经简单实现了.示例和代码如下,点击按钮可以看到效果: 1.示例:   2.代码: <!DOCTYPE html PUBLIC "-//W3C/ ...

  3. 【Javascript Demo】谷歌地图简单实现（附遮罩层和弹出层实现）

    虽然百度地图实现了,但只是国内的,而且前几天貌似还出问题了,对于国际的只能用谷歌地图了,所以就简单研究了下,做了个差不多的. 基本步骤,谷歌地图API文档其实写的很清楚了,先获取API密钥,然后引用j ...

  4. 【Javascript Demo】遮罩层和弹出层简单实现

    最近纠结于遮罩层和弹出层的实现,终于搞定了个简单的版本.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: <!DOCTYPE html PUBLIC "-//W3C//D ...

  5. Asp.net弹出层并且有遮罩层

    长久以来,asp.net弹出层并且有遮罩层问题都是一个难以解决的问题,鉴于此,我决定写个弹出层发布出来,供大家使用... 这里的doing层是遮罩层,divLogin层是登陆层 若有其他问题请留言或邮 ...

  6. js 带遮罩层的弹出层

    最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...

  7. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

  8. layer，备受青睐的web弹层组件

    //http://layer.layui.com/ 特别说明:事件需自己绑定,以下只展现调用代码. //初体验 layer.alert('内容') //第三方扩展皮肤 layer.alert('内容' ...

  9. day-11 python自带库实现2层简单神经网络算法

    深度神经网络算法,是基于神经网络算法的一种拓展,其层数更深,达到多层,本文以简单神经网络为例,利用梯度下降算法进行反向更新来训练神经网络权重和偏向参数,文章最后,基于Python 库实现了一个简单神经 ...

随机推荐

  1. JavaScript学习心得

    javaScript十分的强大,所以自然而然学起来也是不易的,想要掌握它的核心,把它理解透更是不易的,但只要你能够静下心来,耐心的去钻研,学习,还是可以把它给学好的,加油吧! 下面是一些JavaScr ...

  2. .net中ThreadPool与Task的认识总结

    线程池和Task是多线程编程中两个经常使用的技术,大家在熟悉不过了.他们有什么关联关系?Task又是怎么工作的呢?估计很多时候会犯糊涂.通过翻阅资料,终于弄明白了,与大家分享一下.   工作线程与I/ ...

  3. 2778:Ride to School-poj

    2778:Ride to School 总时间限制:  1000ms 内存限制:  65536kB 描述 Many graduate students of Peking University are ...

  4. 2017计算机学科夏令营上机考试-A判决素数个数

    A:判决素数个数 总时间限制:  1000ms 内存限制:  65536kB 描述 输入两个整数X和Y,输出两者之间的素数个数(包括X和Y). 输入 两个整数X和Y(1 <= X,Y <= ...

  5. RAC环境下误操作将数据文件添加到本地存储

    今天碰到个有意思的事情,有客户在Oracle RAC环境,误操作将新增的数据文件直接创建到了其中一个节点的本地存储上. 发现网上去搜的话这种问题还真不少,对应解决方案也各式各样,客户问我选择哪种方案可 ...

  6. Rsync同步、Rsync+Lsync实时同步

    Rsync同步.Rsync+Lsync实时同步 原创博文http://www.cnblogs.com/elvi/p/7658049.html #!/bin/sh #Myde by Elven @ #c ...

  7. npm常用命令整理

    npm是一个NodeJS包管理跟分发工具,已经成为了非官方的发布node模块(包)的标准.它可以帮助我们解决代码部署上的一些问题,将开发者从繁琐的包管理工作中(版本.依赖等)解放出来,更加专注于功能上 ...

  8. Serverless无服务应用架构纵横谈

    Serverless无服务应用架构纵横谈 一.Serverless是啥 自从互联网兴起以来,Server就成了网络的核心部件.所以围绕Server的生意圈,也发展得如火如荼. 从最早的电信托管,到虚拟 ...

  9. 十招让Ubuntu 16.04用起来更得心应手（转）

    ubuntu 16.04是一种长期支持版本(LTS),是Canonical承诺发布五年的更新版.也就是说,你可以让这个版本在电脑上运行五年! 这样一来,一开始就设置好显得特别重要.你应该确保你的软件是 ...

  10. 从零开始构建docker基础镜像

    段子 今年基本已经结束了,我问了很多朋友今年挣钱了没?大多朋友都有挣,而且挣得五花八门:有挣个屁的,有挣个锤子的,有挣个毛的,更有甚者挣个妹的,奢侈之极!最恐怖的是挣个鬼的!有的还可以,挣个球,下午我 ...