1. //信息框-例1
  2. layer.alert('见到你真的很高兴', {icon: 6});
  3.  
  4. //信息框-例2
  5. layer.confirm('你确定你很帅么?', {icon: 3}, function(index){
  6. layer.close(index);
  7. alert('自恋狂');
  8. });
  9.  
  10. //信息框-例3
  11. layer.msg('这是最常用的吧');
  12.  
  13. //信息框-例4
  14. layer.msg('不开心。。', {icon: 5});
  15.  
  16. //信息框-例4
  17. layer.msg('玩命卖萌中', function(){
  18. //关闭后的操作
  19. });
  20.  
  21. //页面层-自定义
  22. layer.open({
  23. type: 1,
  24. title: false,
  25. closeBtn: false,
  26. shadeClose: true,
  27. skin: 'yourclass',
  28. content: '自定义HTML内容'
  29. });
  30.  
  31. //页面层-佟丽娅
  32. layer.open({
  33. type: 1,
  34. title: false,
  35. closeBtn: false,
  36. area: '516px',
  37. skin: 'layui-layer-nobg', //没有背景色
  38. shadeClose: true,
  39. content: $('#tong')
  40. });
  41.  
  42. //iframe层-父子操作
  43. layer.open({
  44. type: 2,
  45. area: ['700px', '530px'],
  46. fix: false, //不固定
  47. maxmin: true,
  48. content: 'test/iframe.html'
  49. });
  50.  
  51. //iframe层-多媒体
  52. layer.open({
  53. type: 2,
  54. title: false,
  55. area: ['630px', '360px'],
  56. shade: 0.8,
  57. closeBtn: false,
  58. shadeClose: true,
  59. content: 'http://player.youku.com/embed/XMjY3MzgzODg0'
  60. });
  61. layer.msg('点击遮罩任意处关闭');
  62.  
  63. //iframe层-禁滚动条
  64. layer.open({
  65. type: 2,
  66. area: ['360px', '500px'],
  67. skin: 'layui-layer-rim', //加上边框
  68. content: ['http://layer.layui.com/mobile', 'no']
  69. });
  70.  
  71. //加载层-默认风格
  72. layer.load();
  73. //此处演示关闭
  74. setTimeout(function(){
  75. layer.closeAll('loading');
  76. }, 2000);
  77.  
  78. //加载层-风格2
  79. layer.load(1);
  80. //此处演示关闭
  81. setTimeout(function(){
  82. layer.closeAll('loading');
  83. }, 2000);
  84.  
  85. //加载层-风格3
  86. layer.load(2);
  87. //此处演示关闭
  88. setTimeout(function(){
  89. layer.closeAll('loading');
  90. }, 2000);
  91.  
  92. //加载层-风格4
  93. layer.msg('加载中', {icon: 16});
  94.  
  95. //打酱油
  96. layer.msg('尼玛,打个酱油', {icon: 4});
  97.  
  98. //tips层-上
  99. layer.tips('上', '#id或者.class', {
  100. tips: [1, '#0FA6D8'] //还可配置颜色
  101. });
  102.  
  103. //tips层-右
  104. layer.tips('默认就是向右的', '#id或者.class');
  105.  
  106. //tips层-下
  107. layer.tips('下', '#id或者.class', {
  108. tips: 2
  109. });
  110.  
  111. //tips层-左
  112. layer.tips('左边么么哒', '#id或者.class', {
  113. tips: [4, '#78BA32']
  114. });
  115.  
  116. //tips层-不销毁之前的
  117. layer.tips('不销毁之前的', '#id或者.class', {
  118. tipsMore: true
  119. });
  120.  
  121. //默认prompt
  122. layer.prompt(function(val){
  123. layer.msg('得到了'+val);
  124. });
  125.  
  126. //屏蔽浏览器滚动条
  127. layer.open({
  128. content: '浏览器滚动条已锁',
  129. scrollbar: false
  130. });
  131.  
  132. //弹出即全屏
  133. var index = layer.open({
  134. type: 2,
  135. content: 'http://www.layui.com',
  136. area: ['300px', '195px'],
  137. maxmin: true
  138. });
  139. layer.full(index);
  140.  
  141. //正上方
  142. layer.msg('灵活运用offset', {
  143. offset: 0,
  144. shift: 6
  145. });
  146.  
  147. //还该列举什么呢
  148. layer.msg('等我想想…');

案列实践

  1. <a href="<?= url('/user/edit/' . $val->id) ?>" class="eve_edit" rel="popup2" title="会员资料修改" class="poplight" >资料修改</a>
  2. <a href="<?= url('/user/frozen/' . $val->id ) ?>" title="选择冻结项" class="event_lock">冻结</a>

js代码书写

  1. $('.eve_edit').click(function() {
  2. oplayer = layer.open({
  3. type: 2,
  4. title: $(this).attr('title'),
  5. shadeClose: true,
  6. shade: false,
  7. maxmin: true,
  8. area: ['60%', '80%'],
  9. content: $(this).attr('href')
  10. });
  11. return false;
  12. });

jquery插件layer的更多相关文章

  1. jquery 弹窗插件 layer

    jquery 弹窗插件 layer 官网:http://sentsin.com/jquery/layer/ 1 <!DOCTYPE html PUBLIC "-//W3C//DTD H ...

  2. 点击弹出 +1放大效果 -- jQuery插件

    20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...

  3. 网站建设常用JQuery插件整理

    1.jQuery.lazyload 作用:延迟加载网站图片,常用于电商网站.图片展示网站,对于提高网站打开速度比较有效. 2.Owl Carousel 作用:图片滚动特效.响应式传送带插件,特点是支持 ...

  4. 弹出框插件layer使用

    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...

  5. 元素视差方向移动jQuery插件-类似github 404页面效果

    原文地址:http://www.xuanfengge.com/shake.html 前言: 视差滚动,大家也许并不陌生.但是对于视差方向移动,你是否有见过效果呢?看官请进来瞧瞧~ demo : 轩枫阁 ...

  6. webpack 引入jquery和第三方jquery插件

    1.引入jquery jQuery 直接在 html 中引入,然后在 webpack 中把它配置为全局即可. index.html: <!DOCTYPE html> <html> ...

  7. 移动端下滑刷新插件(jQuery插件)

    由于在工作不能独自开发,而且为了给他们方便,自己写过不少的插件,不过今天刚好空闲,发出刚好完成的,移动端的下滑到底刷新插件.我不是很喜欢写插件给别人用,因为用起来自然是简单的,没什么难度,所以一起分享 ...

  8. js插件---layer.js使用体验是怎样

    js插件---layer.js使用体验是怎样 一.总结 一句话总结:只有jquery和js,没有css,使用各种弹出层掉用各种函数特别方便,特别简单,特别好用. 引入只需要引入这两个,css都不需要, ...

  9. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

随机推荐

  1. Excel&&word&&PPT

    1. Excel 1.1 制作下拉框 选中单元格或列--> 菜单"数据" --> "数据验证"-->"设置" --> ...

  2. fabric省略输出

    fab -f test_fabric.py start --hide status,running,stdout,user,aborts,warnings,stderr 省略所有输出--hide st ...

  3. flutter initializing gradle终极解决方案

    自己开发的公众号,可以领取淘宝内部优惠券 修改flutter.gradle文件 这种做法网上一大堆的教程,如果你还没改过建议先试下,比如这篇 Flutter 运行 一直Initializing gra ...

  4. python词频统计

    1.jieba 库 -中文分词库 words = jieba.lcut(str)  --->列表,词语 count = {} for word in words: if len(word)==1 ...

  5. 关于消息推送的补充,主要介绍服务端的实现,包含object c 版本 c 版本 java 版本 php 版本 (转)

    要实现消息推送功能,我们可以采用第三方(腾讯:信鸽:百度:云推送:极光推送:友盟):当然,因为各种原因,我们不能使用第三方的推送服务,那我们就需要自己编写服务端.在网上寻觅了很久,找到一篇很不错的讲解 ...

  6. js时间与时间戳之间的转换操作,返回天、小时、分,全家桶

    1.将时间戳转换成时间 var formatDate = function(d) {  var now = new Date(d); var year = now.getFullYear(); var ...

  7. JS的封装(JS插件的封装)

    JS中类的概念类,实际上就是一个function,同时也是这个类的构造方法,new创建该类的实例,new出的对象有属性有方法.方法也是一种特殊的对象. 类的方法在构造方法中初始化实例的方法(就是在构造 ...

  8. wxpython 界面布局

    1.frame.Centre() 窗口出来后显示居中 2.textCtrl文本框style=wx.TE_PASSWORD密码, wx.TE_MULTILINE多行输入 3.单选按钮组 4.列表 5.图 ...

  9. 面向对象设计之------Is-A(继承关系)、Has-A(合成关系,组合关系)和Use-A(依赖关系)(转)

    原文url:http://blog.csdn.net/loveyou128144/article/details/4749576 @Is-A,Has-A,Use-A则是用来描述类与类之间关系的.简单的 ...

  10. java生成实体类的工具内部是如何实现的(mysql)

    一.认识INFORMATION_SCHEMA数据库 INFORMATION_SCHEMA数据库提供了访问数据库元数据(数据的数据)的方式 该数据库中存放有数据库名.表名,列名.列的数据类型等各种数据 ...