在这里提供一个简单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. 最强离线安装MySQL_8.0.2方法

    最强离线安装MySQL_8.0.2方法,一次就能安装成功. 按照此方式,离线安装MySQL五分钟都花不到,节省了大量的宝贵时间. 前戏,假设你已经从MySQL官网中获取了下面这个压缩包: 解压之后变成 ...

  2. openstack集群环境准备

    #0.openstack集群环境准备 openstack pike 部署 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html #openstack集群环境准 ...

  3. mysql 系统性浅聊 myisam 存储引擎【原创】

    >>思维导图 >>介绍 mysql中的存储引擎都是以插件的形式存在,目前用的最多存储引擎就是innodb和myisam.MySQL5.5.5以后(包括5.5.5)默认使用Inn ...

  4. POJ 1151 Wormholes spfa+反向建边+负环判断+链式前向星

    Wormholes Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 49962   Accepted: 18421 Descr ...

  5. 【NOIP2012提高组】借教室

    90分暴力解法: 用线段树,初始值为该天的教室数,每个人来申请的时候在这段区间减去借走的数,然后查询最小值是否小于0,是就输出-1,否则继续. (其实在vijos是可以直接A的,他们的评测机太快了) ...

  6. day9、用户登陆出现-bash-4.1$错误的原因及解决方法

    原因:用户家目录里面与环境变量有关的文件被删除所导致的 下面两个文件被删除导致的 .bash_profile .bashrc 解决方法:从/etc/skel把丢失的文件 复制回来就可以了 -bash- ...

  7. Flask-admin 笔记一 （快速启用）

    1,快速启用   1) 安装flask-admin pip install flask-admin 2) 配置使用 from flask import Flask from flask_admin i ...

  8. lucene6+HanLP中文分词

    1.前言 前一阵把博客换了个模版,模版提供了一个搜索按钮,这让我想起一直以来都想折腾的全文搜索技术,于是就用lucene6.2.1加上HanLP的分词插件做了这么一个模块CSearch.效果看这里:h ...

  9. 回溯法之求n个集合的幂集

    幂集:有一个集合A,集合A的幂集是由集合A的全部子集所组成的集合. 集合中的每一个元素仅仅有两种状态:属于幂集的元素集或不属于幂集的元素集. 集合{1,2,3},用一棵二叉树来表示. 递归函数 voi ...

  10. 用HTML5实现的各种排序算法的动画比較

    用HTML5实现的各种排序算法的动画比較 非常有意思,详见: http://www.webhek.com/misc/comparison-sort/