在这里提供一个简单layer遮罩层，想深入了解可以进入 layer官网 多多学习哦。

先看下HTML页面代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>layer遮罩层</title>
  6.     <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/csd97/H-ui.min.css" />　
  7. </head>
  8. <body>
  9.     <center>
  10.         <a href="javascript:;" onclick="easy()">点我</a>
  11.     </center>
  12. </body>
  13. </html>
  14.  
  15. <script type="text/javascript" src="__ROOT__/Public/admin/lib/jquery/1.9.1/jquery.min.js"></script>
  16. <script type="text/javascript" src="__ROOT__/Public/admin/lib/layer/2.4/layer.js"></script>
  17.  
  18. <script>
  19.     function easy(){
  20.         var content=
  21.             '<form action={:U(actInsGoods)} method="post" class="form form-horizontal" id="form-member-add">'
  22.             + '<div class="row cl">'
  23.             + '<label class="form-label col-xs-4 col-sm-3">名称</label>'
  24.             + '<div class="formControls col-xs-8 col-sm-9">'
  25.             + '<input type="text" class="input-text" name="name">'
  26.             + '</div>'
  27.             + '</div>'
  28.             + '<div class="row cl">'
  29.             + '<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">'
  30.             + '<input class="btn radius" type="submit" value="提交">'
  31.             + '<input class="btn radius layui-layer-close" type="submit" value="取消">'
  32.             + '</div>'
  33.             + '</div>'
  34.             + '</form>';
  35.         layer.open({
  36.             type: 1,
  37.             area: ['400px','300px'],
  38.             fix: false, //不固定
  39.             maxmin: true,
  40.             shade:0.4,
  41.             title: '标题',
  42.             content: content
  43.         });
  44.     }
  45. </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. Servlet之过滤器（Filter）和监听器（Listener）

    过滤器 过滤器是一个java组件,可以拦截发送至某个servelet,jsp页面或静态页面的请求,可以在响应发送到客户之前进行拦截 工作原理: 过滤器类必须实现 Filter 接口,包含的方法如下: ...

  2. toastr 通知提示插件

    table.sb-tb td,table.sb-tb th { padding: 5px 10px !important } jquery toastr 一款轻量级的通知提示框插件. 网页开发中经常会 ...

  3. codeforces 895B XK Segments 二分 思维

    codeforces 895B XK Segments 题目大意: 寻找符合要求的\((i,j)\)对,有:\[a_i \le a_j \] 同时存在\(k\),且\(k\)能够被\(x\)整除,\( ...

  4. 一个PHP高性能、多并发、restful的工具库（基于multi_curl）

    This is high performance curl wrapper written in pure PHP. It's compatible with PHP 5.4+ and HHVM. N ...

  5. php命令执行脚本

    php -f jiaoben.php &  读入并解释指明的文件.

  6. centos7.0安装教程

    CentOS(Community Enterprise Operating System,中文意思是:社区企业操作系统)是Linux发行版之一,它是来自于Red Hat Enterprise Linu ...

  7. pipelineDB初体验

    官网:http://www.pipelinedb.com/ pipelineDB是基于postgres的stream数据库.完全兼容pg的东西. 由于产品需要解决性能这块瓶颈,老大让试试这款基于流计算 ...

  8. mac ox下android 通过battery-historian进行电量分析

    简单介绍下如何用battery-historian进行电量分析,因为battery-hostorian是基于go语言的框架,所以需要安装go 1.安装go 2.配置go环境变量到.bash_profi ...

  9. java 之 单例模式（大话设计模式）

    笔者记得去面试时曾被问起这个模式,当时还没有看过设计模式,对设计模式基本上一无所知,不过可以肯定的是笔者用过单例模式.当时回答的风马牛不相及,很尴尬. 也是从那时起,开始学习设计模式.今天所说的就是单 ...

  10. mov指令具体解释

    MOV指令能够在CPU内或CPU和存储器之间传送字或字节.它传送的信息能够从寄存器到寄存器,马上数到寄存器,马上数到存储单元,从存储单元到寄存器.从寄存器到存储单元,从寄存器或存储单元到除CS外的段寄 ...