1. //http://layer.layui.com/
  2.  
  3. 特别说明:事件需自己绑定,以下只展现调用代码。
  4. //初体验
  5. layer.alert('内容')
  6. //第三方扩展皮肤
  7. layer.alert('内容', {
  8. icon: 1,
  9. skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,去这里查阅
  10. })
  11. //询问框
  12. layer.confirm('您是如何看待前端开发?', {
  13. btn: ['重要','奇葩'] //按钮
  14. }, function(){
  15. layer.msg('的确很重要', {icon: 1});
  16. }, function(){
  17. layer.msg('也可以这样', {
  18. time: 20000, //20s后自动关闭
  19. btn: ['明白了', '知道了']
  20. });
  21. });
  22. //提示层
  23. layer.msg('玩命提示中');
  24. //墨绿深蓝风
  25. layer.alert('墨绿风格,点击确认看深蓝', {
  26. skin: 'layui-layer-molv' //样式类名
  27. ,closeBtn: 0
  28. }, function(){
  29. layer.alert('偶吧深蓝style', {
  30. skin: 'layui-layer-lan'
  31. ,closeBtn: 0
  32. ,shift: 4 //动画类型
  33. });
  34. });
  35. //捕获页
  36. layer.open({
  37. type: 1,
  38. shade: false,
  39. title: false, //不显示标题
  40. content: $('.layer_notice'), //捕获的元素
  41. cancel: function(index){
  42. layer.close(index);
  43. this.content.show();
  44. layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', {time: 5000, icon:6});
  45. }
  46. });
  47. //页面层
  48. layer.open({
  49. type: 1,
  50. skin: 'layui-layer-rim', //加上边框
  51. area: ['420px', '240px'], //宽高
  52. content: 'html内容'
  53. });
  54. //自定页
  55. layer.open({
  56. type: 1,
  57. skin: 'layui-layer-demo', //样式类名
  58. closeBtn: 0, //不显示关闭按钮
  59. shift: 2,
  60. shadeClose: true, //开启遮罩关闭
  61. content: '内容'
  62. });
  63. //tips层
  64. layer.tips('Hi,我是tips', '吸附元素选择器,如#id');
  65. //iframe层
  66. layer.open({
  67. type: 2,
  68. title: 'layer mobile页',
  69. shadeClose: true,
  70. shade: 0.8,
  71. area: ['380px', '90%'],
  72. content: 'http://layer.layui.com/mobile/' //iframe的url
  73. });
  74. //iframe窗
  75. layer.open({
  76. type: 2,
  77. title: false,
  78. closeBtn: 0, //不显示关闭按钮
  79. shade: [0],
  80. area: ['340px', '215px'],
  81. offset: 'rb', //右下角弹出
  82. time: 2000, //2秒后自动关闭
  83. shift: 2,
  84. content: ['test/guodu.html', 'no'], //iframe的url,no代表不显示滚动条
  85. end: function(){ //此处用于演示
  86. layer.open({
  87. type: 2,
  88. title: '很多时候,我们想最大化看,比如像这个页面。',
  89. shadeClose: true,
  90. shade: false,
  91. maxmin: true, //开启最大化最小化按钮
  92. area: ['893px', '600px'],
  93. content: 'http://fly.layui.com/'
  94. });
  95. }
  96. });
  97. //加载层
  98. var index = layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
  99. //loading层
  100. var index = layer.load(1, {
  101. shade: [0.1,'#fff'] //0.1透明度的白色背景
  102. });
  103. //小tips
  104. layer.tips('我是另外一个tips,只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
  105. tips: [1, '#3595CC'],
  106. time: 4000
  107. });
  108. //prompt层
  109. layer.prompt({
  110. title: '输入任何口令,并确认',
  111. formType: 1 //prompt风格,支持0-2
  112. }, function(pass){
  113. layer.prompt({title: '随便写点啥,并确认', formType: 2}, function(text){
  114. layer.msg('演示完毕!您的口令:'+ pass +' 您最后写下了:'+ text);
  115. });
  116. });
  117. //tab层
  118. layer.tab({
  119. area: ['600px', '300px'],
  120. tab: [{
  121. title: 'TAB1',
  122. content: '内容1'
  123. }, {
  124. title: 'TAB2',
  125. content: '内容2'
  126. }, {
  127. title: 'TAB3',
  128. content: '内容3'
  129. }]
  130. });
  131. //相册层
  132. $.getJSON('test/photos.json?v='+new Date, function(json){
  133. layer.photos({
  134. photos: json //格式见API文档手册页
  135. ,shift: 5 //0-6的选择,指定弹出图片动画类型,默认随机
  136. });
  137. });

//询问框
layer.confirm('确认删除此条订单信息吗?', {
btn: ['确认','取消'] //按钮
}, function(){
layer.msg('删除成功', {icon: 1});
layer.msg('删除失败', {icon: 2});

setTimeout("window.location.reload()",1000);
}, function(){

});

layer,备受青睐的web弹层组件的更多相关文章

  1. layer是一款近年来备受青睐的web弹层组件

    layer.closeAll(); //疯狂模式,关闭所有层 layer.closeAll('dialog'); //关闭信息框 layer.closeAll('page'); //关闭所有页面层 l ...

  2. layer 一款口碑极佳的web弹层组件,弹框专用

    研究学习网址: http://layer.layui.com/

  3. jQuery Layer 弹层组件

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

  4. layer 1.9.2 发布,国产 Web 弹层不懈的前行者

    快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中.   <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...

  5. 弹层组件-layer

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

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

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

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

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

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

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

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

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

随机推荐

  1. impdp导入报错ORA-39070:无法打开日志文件

    >impdp test/123456@orcl directory=expnc_dir dumpfile=TEST.DMP full=y ORA-39002:操作无效 ORA39070:无法打开 ...

  2. HearthBuddy Ai调试实战1-->出牌的时候,少召唤了图腾就结束回合

    期望通过ai的调试,来搞明白出牌的逻辑. 55是投火无面者63是恐狼前锋34是风怒36是自动漩涡打击装置13是空灵召唤者, "LocStringZhCn": "<b ...

  3. sysbench 压测

    IP架构 sysbench部署服务器:172.17.100.107 压测服务器:172.17.100.100 MySQL部署目录:/usr/local/mysql 前置工作 1.完成MySQL的安装( ...

  4. java -- SSM配置完成后,能访问jsp文件不能访问html文件,报错解析

    SSM配置完成后,能访问jsp文件不能访问html文件,报错解析 在确保路径没有任何问题的,情况下,相同的页面,jsp能够正常访问,html却不能正常访问(404). 解决方法: 在web.xml中添 ...

  5. centos安装软件

    rpm指令, 该指令安装文件后缀.rpm的可执行程序 yum指令 安装软件源代码,后缀为 .tar.gz(用gzip压缩过的tar包) rpm rpm软件包格式为 (一)查询系统装已经安装的软件信息 ...

  6. MongoTemplate 使用 _id 查询

    MongoTemplate mt; DBObject lisi = new BasicDBObject(); lisi.put("_id", new BasicDBObject(& ...

  7. 【VS开发】内存映射文件进程间共享内存

    内存映射文件进程间共享内存 内存映射文件的另一个功能是在进程间共享数据,它提供了不同进程共享内存的一个有效且简单的方法.后面的许多例子都要用到共享内存.共享内存主要是通过映射机制实现的.Windows ...

  8. 最新 三七互娱java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.三七互娱等10家互联网公司的校招Offer,因为某些自身原因最终选择了三七互娱.6.7月主要是做系统复习.项目复盘.Leet ...

  9. 关于 layer.open 动态赋值不了的问题

    前情: layer.open({ type:1, // 用的是默认的信息弹框 content: $('#test'), // 这里不用 $('#test').html(), 不然后面获取不了值 }); ...

  10. HTML的列表表格表单知识点

    无序列表格式                                                                                              ...