1. /*
  2. 先去官网下载最新的js  http://sentsin.com/jquery/layer/
  3. ①引用jquery
  4. ②引用layer.min.js
  5. */
  6. 触发弹层的事件可自由绑定,如:
  7. $('#id').on('click', function(){
  8. layer.msg('test');
  9. });
  10. 下面主要贴出上述例子的调用代码:
  11. 【信息框】:
  12. layer.alert('白菜级别前端攻城师贤心', 8); //风格一
  13. layer.msg('前端攻城师贤心'); //风格二
  14. //当然,远远不止这两种风格。
  15. 【询问框】:
  16. $.layer({
  17. shade: [0],
  18. area: ['auto','auto'],
  19. dialog: {
  20. msg: '您是如何看待前端开发?',
  21. btns: 2,
  22. type: 4,
  23. btn: ['重要','奇葩'],
  24. yes: function(){
  25. layer.msg('重要', 1, 1);
  26. }, no: function(){
  27. layer.msg('奇葩', 1, 13);
  28. }
  29. }
  30. });
  31. //还可用layer.confirm()快捷调用
  32. 【页面层一】
  33. $.layer({
  34. type: 1,
  35. shade: [0],
  36. area: ['auto', 'auto'],
  37. title: false,
  38. border: [0],
  39. page: {dom : '.layer_notice'}
  40. });
  41. 【页面层二】
  42. var pageii = $.layer({
  43. type: 1,
  44. title: false,
  45. area: ['auto', 'auto'],
  46. border: [0], //去掉默认边框
  47. shade: [0], //去掉遮罩
  48. closeBtn: [0, false], //去掉默认关闭按钮
  49. shift: 'left', //从左动画弹出
  50. page: {
  51. html: '<div style="width:420px; height:260px; padding:20px; border:1px solid #ccc; background- color:#eee;"><p>我从左边来,我自定了风 格。</p><button id="pagebtn" class="btns" onclick="">关闭< /button></div>'
  52. }
  53. });
  54. //自设关闭
  55. $('#pagebtn').on('click', function(){
  56. layer.close(pageii);
  57. });
  58. 【iframe层一】
  59. $.layer({
  60. type: 2,
  61. shadeClose: true,
  62. title: false,
  63. closeBtn: [0, false],
  64. shade: [0.8, '#000'],
  65. border: [0],
  66. offset: ['20px',''],
  67. area: ['1000px', ($(window).height() - 50) +'px'],
  68. iframe: {src: 'http://f2e.sentsin.com/chat'}
  69. });
  70. 【iframe层二】
  71. layer.tips('5秒后右下角窗口自动关闭,并生成一个新的iframe', this, {
  72. time: 5,
  73. maxWidth: 260
  74. });
  75. $.layer({
  76. type: 2,
  77. closeBtn: false,
  78. shadeClose: true,
  79. shade: [0.1, '#fff'],
  80. border: [0],
  81. time: 5,
  82. iframe: {
  83. src: 'test/guodu.html'
  84. },
  85. title: false,
  86. area: ['300px','250px'],
  87. shift: 'right-bottom',
  88. end: function(){
  89. $.layer({
  90. type : 2,
  91. title: '贤心博客 - sentsin.com',
  92. shadeClose: true,
  93. maxmin: true,
  94. fix : false,
  95. area: ['1024px', 500],
  96. iframe: {
  97. src : 'http://sentsin.com/'
  98. }
  99. });
  100. }
  101. });
  102. 【加载层一】
  103. layer.load(3);
  104. 【加载层二】
  105. layer.load('加载带文字', 3);
  106. 【tips层一】
  107. layer.tips('tips的样式并非是固定的,您可自定义外观。', this, {
  108. style: ['background-color:#78BA32; color:#fff', '#78BA32'],
  109. maxWidth:185,
  110. time: 3,
  111. closeBtn:[0, true]
  112. });
  113. 【tips层二】
  114. layer.tips('默认没有关闭按钮', this , {guide: 1, time: 2});
  115. 【输入/文件层】
  116. //普通文本
  117. layer.prompt({title: '您的名字?'}, function(name){
  118. alert(name);
  119. });
  120. //密码文本
  121. layer.prompt({title: '输入任何口令,并确认',type: 1}, function(pass){
  122. alert(pass);
  123. });
  124. //文件上传
  125. layer.prompt({title: '随便上传个东东,并确认',type: 2}, function(file){
  126. alert(file);
  127. });
  128. //多行文本
  129. layer.prompt({title: '随便写点啥,并确认',type: 3}, function(val){
  130. alert(val);
  131. });
  132. 【tab层】
  133. layer.tab({
  134. area: ['1000px', '500px'],
  135. data: [
  136. {title: 'Say', content:'Hi,Main'},
  137. {title: '无题', content:'支持html传入'}
  138. ]
  139. });
  140. 【相册层】
  141. //此处为异步请求模式,具体的json格式,请等待文档更新。或者你直接通过请求看photos.json
  142. var conf = {};
  143. $.getJSON('ajax地址', {}, function(json){
  144. conf.photoJSON = json; //保存json,以便下次直接读取内存数据
  145. layer.photos({
  146. html: '这里传入自定义的html,也可以不用传入(这意味着不会输出右侧区域)。相册支持左右方向键、Esc关闭',
  147. json: json
  148. });
  149. });

jquery layer弹窗弹层插件 小巧强大的更多相关文章

  1. jquery layer弹窗弹层插件 (转)

    /* 先去官网下载最新的js  http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id ...

  2. layer弹层插件

      // 使用前需要引入jquery的支持,链接如下:   https://blog-static.cnblogs.com/files/liguanlong/jquery1.9.1.min.js    ...

  3. jQuery Layer mobile 弹出层

    layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选 ...

  4. 借用layer让弹层不限制在iframe内部

    使用方法: 1 除了layer的success,end,cancel回掉函数以外其它的layer参数都可以使用. 2 使用前在layer的js后边把该js引入(可以命名为layerExtend). 3 ...

  5. Layer.js弹层的一些简单的使用

    //-----------这里只是简单的做一下记录,没有封装,作为笔记防止忘记了 //----contentMsg 里面是可以传入 HTML代码的 top.layer.alert(contentMsg ...

  6. jQuery layer[页面弹出框]

    常见接口如下: 方法名 描述 $.layer({}) 核心接口,参数是一个对象,对象属性参见上述列表.诸如layer.alert()之类的为$.layer()的包装方法. layer.v 获取版本号. ...

  7. layui layer.open() 弹层开启后 Enter回车 遮罩层无限弹处理

    解决方案: 增加success回调及其内容 如下: layer.open({ title:'更新论坛信息', type: 1, skin: 'layui-layer-rim', area: ['500 ...

  8. 【Javascript】好用的js弹层插件,layerUI

    官网:layerUI 中文手册:layerAPI

  9. jquery layer插件弹出弹层 结构紧凑,功能强大

    /* 去官方网站下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 事件触发炸弹层可以自由绑定,例如: $('# ...

随机推荐

  1. VS调试Ajax

    VS调试Ajax: 1.ashx在后台处理程序中设定断点 2.触发AJAX 3.F12打开浏览器调试,搜索找到ajax调用的JS,设置断点,在浏览器中单步调试,会自动进入后台处理程序,然后就可以调试后 ...

  2. Python 字符串处理大全.

    Python 字符串 字符串是Pyhton中常用的数据类型,我们可以使用引号来创建字符串 . 创建字符串很简单 , 就不说了 . Python 访问字符串中的值 鬼叔本着简洁 使用的设计目的 , 在设 ...

  3. JQuery blockUI

    1 $.blockUI({//界面锁定之后 ,显示样式和提示消息 css: { width: 'auto', left: '20px', right: '20px' }, message: '< ...

  4. 向post请求中写入数据,最终保存在了HttpWebRequest.Params中

    一.向post请求中写入数据,最终保存在了HttpWebRequest.Params中: 1)如果存入的是IDictionary类型的字符串变量,如:“username=administrator”, ...

  5. 负margin居中

    <!DOCTYPE html><html> <head> <title> new document </title> <meta na ...

  6. magento产品成功添加到购物车后跳转到不同页面 添加 add to cart 按钮

    1 添加产品到购物车成功后是跳转到购物车页面或不跳转.这个在后台可以设置 system -> configuration -> After Adding a Product Redirec ...

  7. C# Listview 第一列不能居中

    /********************************************************************** * C# Listview 第一列不能居中 * 说明: ...

  8. Linux系统下查看硬件信息命令大全

    导读 有许多命令可以用来查看 Linux 系统上的硬件信息.有些命令只能够打印出像 CPU 和内存这一特定的硬件组件信息,另外一些命令可以查看多种硬件组件的信息. 这个教程可以带大家快速了解一下查看各 ...

  9. Apache CXF 102 CXF with REST

    前言 续上篇Apache CXF 101,摘抄部分REST概念性知识,以运行实例考察CXF对REST的支持. 目录 1 REST简介 2 工具 3 运行实例 内容 本Spike记录中内容,如无特别指出 ...

  10. ion-nav-view的学习 和理解

    当用户在你的app中浏览时,Ionic能够保持检测他们的浏览历史.通过了解他们的浏览历史,向左或向右滑动时可以正确的在视图间转换,或不转换.一个额外的好处是Ionic的导航系统具有可以管理多个历史记录 ...