layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。

在与同类组件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,皆广受欢迎。当然,这种“王婆卖瓜”的陈述听起来总是有点难受,因此你需要进一步了解她是否真的如你所愿。

  1. 版本Layer 2.2

  2. 作者:贤心闲

  3. github

在线实例

实例预览 layer实例DEMO演示-jQuery弹出层插件

实例预览 layer实例测试

参考手册

帮助文档 layer API 帮助文档

引入文件

  1. <link rel="stylesheet" href="layer.css" media="all">
  2. <script type="text/javascript" src="jquery.min.js"></script>
  3. <script type="text/javascript" src="layer.js"></script>
复制

使用方法

  1. <a href="javascript:;" onclick="test();">点我弹窗</a>
  2. <script>
  3. function test() {
  4. //在这里面输入任何合法的js语句
  5. layer.open({
  6. type: 1,
  7. //page层
  8. area: ['500px', '300px'],
  9. title: '你好,layer。',
  10. shade: 0.6,
  11. //遮罩透明度
  12. moveType: 1,
  13. //拖拽风格,0是默认,1是传统拖动
  14. shift: 1,
  15. //0-6的动画形式,-1不开启
  16. content: '<div style="padding:50px;">这是一个非常普通的页面层(type:1),传入了自定义的html</div>'
  17. });
  18. }
  19. </script>
复制

jQuery Layer 弹层组件的更多相关文章

  1. 学习layer弹层组件移动版

    layer弹层组件官网 常用参数: shadeClose:默认true,是否点击遮罩时关闭层

  2. Layer弹层组件 二次扩展,项目中直接使用。

    /************************ Layer扩展 ****************************/ /* * Layer弹出Alert提示框 * @param messag ...

  3. HTML5 本地存储+layer弹层组件制作记事本

    什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这 ...

  4. 弹层组件-layer

    layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...

  5. layerweb弹层组件(SSH框架下)

    action类 这里主要看业务方法中表单路径中的(isClose = "1";return resUri;) public class MaterialsAction extend ...

  6. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  7. React15.6.0实现Modal弹层组件

    代码地址如下:http://www.demodashi.com/demo/12315.html 注:本文Demo环境使用的是我平时开发用的配置:这里是地址. 本文适合对象 了解React. 使用过we ...

  8. jQuery layer弹出层插件 http://layer.layui.com/直接上官网学

    在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...

  9. layer弹层基本参数初尝试

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. sublime简要笔记

    选中单词 [1]选中当前单词 ctrl+d [2]跳过当前单词 ctrl+k ctrl+d [3]选中相同的所有单词 alt+f3 [4]多行游标 按住shift,然后按住鼠标右键向下拖动 行操作 [ ...

  2. 国内第一部C#.Net调用Matlab混合编程视频教程

       本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 Matlab和C#混合编程文章目录:[目录]Matlab和C#混合编程文章目录 一.视频说明 2014年的5.1,我将这套视频教 ...

  3. Asp.Net回车键触发Button的OnClick事件解决方案

    在aspx页面有textbox文本框,还有三个button按钮.启用textbox的TextChanged事件和button的click事件. 问题: 现在在textbox文本框输入完数据按“回车”后 ...

  4. 云计算之路-阿里云上:Web服务器遭遇奇怪的“黑色30秒”问题

    今天下午访问高峰的时候,主站的Web服务器出现奇怪的问题,开始是2台8核8G的云服务器(ECS),后来又加了1台8核8G的云服务器,问题依旧. 而且3台服务器特地使用了不同的配置:1台是禁用了虚拟内存 ...

  5. Linux 内存管理

    查看Linux内存使用情况 free -m Linux内存清理:绝大多数情况下都不需要此操作,因为cache的内存在需要的时候是可以自动释放的- 最好先sync几次,再清理内存,有下面三个级别,数值越 ...

  6. 轻松自动化---selenium-webdriver(python) (十)

    本节重点 处理下拉框 switch_to_alert() accept() 下拉框是我们最常见的一种页面元素,对于一般的元素,我们只需要一次就定位,但下拉框里的内容需要进行两次定位,先定位到下拉框,再 ...

  7. web前端学习笔记(CSS固定宽度布局)

    一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml" ...

  8. Eclipse10个最有用的快捷键[From: Internet]

    1. ctrl+shift+r:打开资源这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如applic*.xml ...

  9. HashMap的resize和Fail-Fast机制

    1.HashMap的resize(rehash): 当HashMap中的元素越来越多的时候,hash冲突的几率也就越来越高,因为数组的长度是固定的.所以为了提高查询的效率,就要对HashMap的数组进 ...

  10. ASP.Net 获取服务器信息

    1: Response.Write("服务器机器名:" + Server.MachineName); 2: Response.Write("<br/>&quo ...