牛逼的 弹出层 layer ！！！
2024-04-26 19:22:35
本文出自：http://www.cnblogs.com/jiqing9006/p/5086092.html
功能强大，实用，操作方便，文档齐全。
http://layer.layui.com/api.html
常用功能代码：
<!doctype html>
<html><head><meta charset="utf-8"><title>layer-更懂你的web弹窗解决方案</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><script src="layer/layer.js"></script><script src="layer/extend/layer.ext.js"></script>
</head><body><script>function func1() {layer.alert('内容');}function func2() {layer.alert('内容', {icon: 1,skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅});}function func3() {//询问框layer.confirm('您是如何看待前端开发？', {btn: ['重要','奇葩'] //按钮}, function(){layer.msg('的确很重要', {icon: 1});}, function(){layer.msg('也可以这样', {time: 2000, //2s后自动关闭btn: ['明白了', '知道了']});});}function func4() {//提示层layer.msg('玩命提示中');}function func5() {//墨绿深蓝风layer.alert('墨绿风格，点击确认看深蓝', {skin: 'layui-layer-molv' //样式类名,closeBtn: 0}, function(){layer.alert('偶吧深蓝style', {skin: 'layui-layer-lan',closeBtn: 0,shift: 4 //动画类型});});}function func6() {//捕获页layer.open({type: 1,shade: false,title: false, //不显示标题content: $('.layer_notice'), //捕获的元素cancel: function(index){layer.close(index);this.content.show();layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 2000, icon:6});}});}function func7() {//页面层layer.open({type: 1,skin: 'layui-layer-rim', //加上边框area: ['420px', '240px'], //宽高content: 'html内容'});}function func8() {//自定页layer.open({type: 1,skin: 'layui-layer-demo', //样式类名closeBtn: 0, //不显示关闭按钮shift: 2,area: ['420px', '240px'], //宽高shadeClose: true, //开启遮罩关闭content: '内容'});}function func9() {//tips层layer.tips('Hi，我是tips', $("#tips"));}function func10() {//iframe层layer.open({type: 2,title: 'layer mobile页',shadeClose: true,shade: 0.8,area: ['380px', '90%'],content: 'http://m.baidu.com' //iframe的url}); }function func11() {//iframe窗layer.open({type: 2,title: false,closeBtn: 0, //不显示关闭按钮shade: [0],area: ['340px', '215px'],offset: 'auto', //右下角弹出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://www.baidu.com'});}});}function func12() {//加载层var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2}function func13() {//loading层var index = layer.load(1, {shade: [0.1,'#fff'] //0.1透明度的白色背景});}function func14() {//小tipslayer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', $('#tips2'), {tips: [1, '#3595CC'],time: 4000});}function func15() {//prompt层layer.prompt({title: '输入任何口令，并确认',formType: 1 //prompt风格，支持0-2}, function(pass){layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text){layer.msg('演示完毕！您的口令：'+ pass +' 您最后写下了：'+ text);});});}function func16() {//tab层layer.tab({area: ['600px', '300px'],tab: [{title: 'TAB1', content: '内容1'}, {title: 'TAB2', content: '内容2'}, {title: 'TAB3', content: '内容3'}]});}function openpage() {layer.config({extend: 'extend/layer.ext.js'}); //页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕layer.ready(function() {//官网欢迎页layer.open({type: 2,skin: 'layui-layer-lan',title: 'layer弹层组件',fix: false,shadeClose: true,maxmin: true,area: ['1000px', '500px'],content: 'https://www.baidu.com'});layer.msg('欢迎使用layer');}); }</script><div class="layer_notice">hello,i'm layer!</div><button id="func1" οnclick="func1();">初体验</button><button id="func2" οnclick="func2();">皮肤</button><button id="func3" οnclick="func3();">询问框</button><button id="func4" οnclick="func4();">提示层</button><button id="func5" οnclick="func5();">蓝色风格</button><button id="func6" οnclick="func6();">捕捉页</button><button id="func7" οnclick="func7();">页面层</button><button id="func8" οnclick="func8();">自定义</button><button id="func9" οnclick="func9();">tips层</button><button id="func10" οnclick="func10();">iframe层</button><button id="func11" οnclick="func11();">iframe窗</button><button id="func12" οnclick="func12();">加载层</button><button id="func13" οnclick="func13();">loading层</button><button id="func14" οnclick="func14();">小tips</button><button id="func15" οnclick="func15();">prompt层</button><button id="func16" οnclick="func16();">tab层</button><button id="openpage" οnclick="openpage();">openpage</button><button id="tips">tips</button><button id="tips2">tips2</button>
</body></html>参数灵活，丰富。可以作为开发项目的公共模块，多处使用。
案例下载
牛逼的 弹出层 layer ！！！相关推荐
- php layui弹出修改功能,非常好用的弹出层 layer，常用功能demo，快速上手！
功能强大,实用,操作方便,文档齐全. 参数灵活,丰富.可以作为开发项目的公共模块,多处使用. 老文档地址:http://layer.layui.com/api.html 已经停止维护 常用功能代码de ...
- layer php弹出层,layer官方演示与讲解（jQuery弹出层插件）
特别说明:事件需自己绑定,以下只展现调用代码. //初体验 layer.alert('内容') //第三方扩展皮肤 layer.alert('内容', { icon: 1, skin: 'layer- ...
- html5相对父元素定位,layer弹出层设置相对父级元素定位
layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...
- 关闭当前layer弹出层，点按钮再弹出一个layer弹出层
关闭当前layer弹出层,点按钮再弹出一个layer弹出层 yes - 确定按钮回调方法 类型:Function,默认:null 该回调携带两个参数,分别为当前层索引.当前层DOM对象.如: laye ...
- 数据表格+弹出层的综合案例
json准备 persons.json {"code": 0,"msg": "","count": 101," ...
- layui 弹出层回调获取弹出层数据
// 弹出楼栋负责人信息页面 layer.open({ type: 2, ...
- 前端框架Layui学习五：弹出层和数据表格
Layui layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,拿来即用. 一.弹出层 在 layui 中使用 layer l ...
- html弹出层获取填充数据,layui 弹出层回调获取弹出层数据的例子
如下所示: // 弹出楼栋负责人信息页面 layer.open({ type: 2, title:'请选择楼栋负责人', maxmin: false, area: ['60%', '80%'], of ...
- layer弹出层闪退_layer弹出层详解
1.layer 弹出层iframe页面关闭自身 function closeFrame() { var index = parent.layer.getFrameIndex(window.name); ...
- 使用layui的layer组件做弹出层
官方文档地址: http://www.layui.com/doc/modules/layer.html 本例演示效果: 当点击申请提现时,出现申请提现框,并根据用户输入进行一些判断,给出友好提示,比如 ...
最新文章
- 【冷门实用小工具】JAVA和C#轻量级的UML图绘制工具NClass，UML类图编辑器免安装版【亲测有效】
- hdu1978 简单记忆化搜索
- 阐述计算机历程以及未来发展方向,计算机程序的发展史
- 安装完Final Cut Pro X后出现了打不开的情况的解决方法
- java_log_02
- Atitit word结构化提取考试试题读取 poi读取word nlp aiprj 目录 1.1. 结构化后数据 1 1.2. 文字读取 1 1.3. 图片读取 1 1.4. Doc的表格读取 /
- 海量数据存储的解决方案（分布式数据库）
- Axure RP9授权码（亲测有效）
- 网络：bit、Byte、bps、Bps、pps、Gbps的单位详细说明及换算。
- 使用FFmpeg命令对音视频进行基础的编辑
- 【HTML期末学生大作业】 制作一个简单HTML保护野生动物老虎网页设计专题（HTML+CSS）
- U盘Windows PE
- 【JZOJ】 【NOIP2014】【模拟试题】保镖排队
- 【企业架构】确定策略和动机
- 用设计模式解决电商项目的更新库存业务
- 想用 AI 在《MineCraft》挖矿躺赢？660 支队伍全部失败
- IDEA配置远程debug
- linux上ftp和ns有什么区别,Linux下ftp使用及nfs网络文件系统
- 使用iTunes与iTools导出微信聊天记录
- 苏州文正学院计算机专业,苏州大学文正学院公共计算机课程教学改革方案（试行）...