特别说明:事件需自己绑定,以下只展现调用代码。

//初体验 layer.alert(‘内容‘)

//第三方扩展皮肤 layer.alert(‘内容‘, { icon: 1, skin: ‘layer-ext-moon‘ //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,去这里查阅 })

//询问框 layer.confirm(‘您是如何看待前端开发?‘, { btn: [‘重要‘,‘奇葩‘] //按钮 }, function(){ layer.msg(‘的确很重要‘, {icon: 1}); }, function(){ layer.msg(‘奇葩么么哒‘, {shift: 6}); });

//提示层 layer.msg(‘玩命提示中‘);

//墨绿深蓝风 layer.alert(‘墨绿风格,点击确认看深蓝‘, { skin: ‘layui-layer-molv‘ //样式类名 ,closeBtn: 0 }, function(){ layer.alert(‘偶吧深蓝style‘, { skin: ‘layui-layer-lan‘ ,closeBtn: 0 ,shift: 4 //动画类型 }); });

//捕获页 layer.open({ type: 1, shade: false, title: false, //不显示标题 content: $(‘.layer_notice‘), //捕获的元素 cancel: function(index){ layer.close(index); this.content.show(); layer.msg(‘捕获就是从页面已经存在的元素上,包裹layer的结构‘,{time: 5000}); } });

//页面层 layer.open({ type: 1, skin: ‘layui-layer-rim‘, //加上边框 area: [‘420px‘, ‘240px‘], //宽高 content: ‘html内容‘ });

//自定页 layer.open({ type: 1, skin: ‘layui-layer-demo‘, //样式类名 closeBtn: false, //不显示关闭按钮 shift: 2, shadeClose: true, //开启遮罩关闭 content: ‘内容‘ });

//tips层 layer.tips(‘Hi,我是tips‘, ‘吸附元素选择器,如#id‘);

//iframe层 layer.open({ type: 2, title: ‘layer mobile页‘, shadeClose: true, shade: 0.8, area: [‘380px‘, ‘90%‘], content: ‘http://layer.layui.com/mobile/‘ //iframe的url });

//iframe窗 layer.open({ type: 2, title: false, closeBtn: false, shade: [0], area: [‘340px‘, ‘215px‘], offset: ‘rb‘, //右下角弹出 time: 2000, //2秒后自动关闭 shift: 2, content: [‘test/guodu.html‘, ‘no‘], //iframe的url,no代表不显示滚动条 end: function(){ //此处用于演示 layer.open({ type: 2, title: ‘很多时候,我们想最大化看,比如像这个页面。‘, shadeClose: true, shade: false, maxmin: true, //开启最大化最小化按钮 area: [‘1150px‘, ‘650px‘], content: ‘http://fly.layui.com/‘ }); } });

//加载层 var index = layer.load(0, {shade: false}); //0代表加载的风格,支持0-2

//loading层 var index = layer.load(1, { shade: [0.1,‘#fff‘] //0.1透明度的白色背景 });

//小tips layer.tips(‘我是另外一个tips,只不过我长得跟之前那位稍有些不一样。‘, ‘吸附元素选择器‘, { tips: [1, ‘#3595CC‘], time: 4000 });

//prompt层 layer.prompt({ title: ‘输入任何口令,并确认‘, formType: 1 //prompt风格,支持0-2 }, function(pass){ layer.prompt({title: ‘随便写点啥,并确认‘, formType: 2}, function(text){ layer.msg(‘演示完毕!您的口令:‘+ pass +‘ 您最后写下了:‘+ text); }); });

//tab层 layer.tab({ area: [‘600px‘, ‘300px‘], tab: [{ title: ‘TAB1‘, content: ‘内容1‘ }, { title: ‘TAB2‘, content: ‘内容2‘ }, { title: ‘TAB3‘, content: ‘内容3‘ }] });

//相册层 $.getJSON(‘test/photos.json?v=‘+new Date, function(json){ layer.photos({ photos: json //格式见API文档手册页 }); });

layer php弹出层,layer官方演示与讲解(jQuery弹出层插件)相关推荐

  1. php layui弹出修改功能,非常好用的弹出层 layer,常用功能demo,快速上手!

    功能强大,实用,操作方便,文档齐全. 参数灵活,丰富.可以作为开发项目的公共模块,多处使用. 老文档地址:http://layer.layui.com/api.html 已经停止维护 常用功能代码de ...

  2. 关闭当前layer弹出层,点按钮再弹出一个layer弹出层

    关闭当前layer弹出层,点按钮再弹出一个layer弹出层 yes - 确定按钮回调方法 类型:Function,默认:null 该回调携带两个参数,分别为当前层索引.当前层DOM对象.如: laye ...

  3. layer系列之弹层layer.prompt

    layer官网:https://www.layui.com/doc/modules/layer.html layer在线调试:http://layer.layui.com/ 如何使用layer.pro ...

  4. Layui--弹出层layer

    开发测试时的layui版本为2.5.5 模块加载名称:layer <!DOCTYPE html> <html xmlns:th="http://www.w3.org/199 ...

  5. jQuery弹出深色系层菜单

    低调奢华jQuery弹出层菜单,使用新版的jQuery库,兼容多种浏览器.Demo展示: http://hovertree.com/texiao/layer/3/ 本特效可以作为网站的引导页,使用jQ ...

  6. [置顶]       推荐一款好用的jquery弹出层插件——wbox

    在我们做项目的过程中难免会让弹出层来展示一些信息,这里推荐一款比较不错的jquery插件,下面说一下特点和新版本增加的功能 wBox特点 背景透明度可以根据实际情况进行调节 可以根据需要添加wBox标 ...

  7. jQuery弹出层登录和全屏注册表单

    jQuery弹出层登录和全屏注册表单,这是一款很漂亮的jQuery登录和注册表单,点击登录时弹出一个登录窗口并伴随动画效果,注册页面则是全屏显示,非常时尚的jQuery表单. 代码: <!DOC ...

  8. 推荐一款好用的jquery弹出层插件——wbox

    阅读原文:http://www.xuejiehome.com/blread-1621.html 在我们做项目的过程中难免会让弹出层来展示一些信息,这里推荐一款比较不错的jquery插件,下面说一下特点 ...

  9. Jquery弹出层插件,非常好用绚丽Lee dialog 1.0

    标题 弹出层的html如下: <div id="floatBoxBg"></div> <div id="floatBox" cla ...

最新文章

  1. 请正确使用return
  2. 找工作刷题--------Java相关
  3. Minimize the Permutation CodeForces - 1256(贪心)
  4. 前端学习(1985)vue之电商管理系统电商系统之本地分支放到git上面保存
  5. joomla第一单元第四节K2类别设置和第五节项目视图选项
  6. [导入]8.3赛车频道活动
  7. DataGrid分页(1)
  8. 网络中各层协议(7层)
  9. js点击页面其他地方如何隐藏div元素菜单
  10. 在 keil MDK_V5中加入arm7,arm9等一些芯片型号
  11. 派生类构造的时候一定要调用_分手的时候,一定要好好说再见
  12. opendrive简介
  13. ubuntu处理openproj不能使用问题
  14. 4am永远 鼠标按键设置_罗技G502 LIGHTSPEED无线游戏鼠标评测 性能超乎想象
  15. 大数据Hadoop快速入门教程
  16. Densepose安装教程--依据Github官方教程成功安装
  17. java POI创建Excel示例(xslx和xsl区别 )
  18. R语言非线性拟合之多项式回归
  19. 软件工程Alpha冲刺day7
  20. 零基础移动端APP设计与开发教程

热门文章

  1. 20万DBA都在关注的12个问题
  2. 频发:记ADG备库日志应用延迟的一次故障处理-云和恩墨技术通讯精选
  3. Volcano:在离线作业混部管理平台,实现智能资源管理和作业调度
  4. 一文解析Apache Avro数据
  5. 鸿蒙轻内核M核源码分析:中断Hwi
  6. 野生前端的数据结构基础练习(2)——队列
  7. Zabbix的应用(6)----常见错误
  8. Kotlin学习笔记29(完结篇) Flow part2 Flow的Buffer 中间操作符zip 打平 异常处理 Flow的完成 onCompletion的优势 onCompletion陷阱
  9. 基于Matlab的跨孔层析成像的最短路径法弯曲射线追踪(一)
  10. pycharm新项目加载库的方法