【注意事项】
一、使用时，请把文件夹layer整个放置在您站点的任何一个目录，只需引入layer.js即可，除jQuery外，其它文件无需再引入。
二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您可以通过layer.config()来配置（详见官网API页）
三、jquery需1.8+
下载layer后，把它部署到你项目中的任何一个目录（当然，我们推荐放在前端相关目录里），你不能去挪动layer里面的文件结构，因为它们是不可拆散的组合。就像这样：(特别说明：需要把整个layer文件夹引入你的文件中，而不是单单引入layer.js文件)
你不必去管那些文件是干嘛的，你只需要认准一个文件：layer.js 没错，当你试图在页面呈现layer的时候，你应该这样去做：（最简单的示例）
- nbsp;html>
.btn{ width: 100%; height: 50px; line-height: 50px; background: magenta; text-align: center; font-size: 15px; } 点我$(".btn").bind("click",function(){ layer.msg('点我的人最美！'); });
登录后复制
- $("#btn").bind("click",function(){ //layer.msg('点我的人最美！'); layer.msg('此商品不存在或者已下架，看看其他商品吧！', { time: 3000 });});
登录后复制
更多示例：
- nbsp;html>
.btn:nth-child(odd){ width: 100%; height: 50px; line-height: 50px; background: magenta; text-align: center; font-size: 15px; } .btn:nth-child(even){ width: 100%; height: 50px; line-height: 50px; background: aqua; text-align: center; font-size: 15px; } #test5{ text-align: center; width: 500px; margin-left: 500px; } 点我.btn点我test2点我parentIframe点我test4点我test5$(function(){ $("#btn").bind("click",function(){ layer.msg('点我的人最美！'); }); //弹出一个页面层 $('#test2').on('click', function(){ layer.open({ type: 1, area: ['600px', '360px'], shadeClose: true, //点击遮罩关闭 content: '自定义内容--添加自己需要的描述内容' }); }); //弹出一个iframe层 $('#parentIframe').on('click', function(){ layer.open({ type: 2, title: 'iframe父子操作', maxmin: true, shadeClose: true, //点击遮罩关闭层 area : ['800px' , '520px'], content: 'parentIframe.html' }); }); //弹出一个loading层 $('#test4').on('click', function(){ var ii = layer.load(); //此处用setTimeout演示ajax的回调 setTimeout(function(){ layer.close(ii); }, 1000); }); //弹出一个tips层 $('#test5').on('click', function(){ layer.tips('Hello tips!', '#test5'); }); });
登录后复制
- nbsp;html>
.btn:nth-child(odd){ width: 100%; height: 50px; line-height: 50px; background: magenta; text-align: center; font-size: 15px; } .btn:nth-child(even){ width: 100%; height: 50px; line-height: 50px; background: aqua; text-align: center; font-size: 15px; } #test5{ text-align: center; width: 100px; margin-left: 100px; } 点我.btn点我test2点我parentIframe点我test4点我test5点我test6点我test7点我test8点我test9$(function(){ $("#btn").bind("click",function(){ layer.msg('点我的人最美！'); }); //弹出一个页面层 $('#test2').on('click', function(){ layer.open({ type: 1, area: ['600px', '360px'], shadeClose: true, //点击遮罩关闭 content: '自定义内容--添加自己需要的描述内容' }); }); //弹出一个iframe层 $('#parentIframe').on('click', function(){ layer.open({ type: 2, title: 'iframe父子操作', maxmin: true, shadeClose: true, //点击遮罩关闭层 area : ['800px' , '520px'], content: 'parentIframe.html' }); }); //弹出一个loading层 $('#test4').on('click', function(){ var ii = layer.load(); //此处用setTimeout演示ajax的回调 setTimeout(function(){ layer.close(ii); }, 1000); }); //弹出一个tips层 $('#test5').on('click', function(){ layer.tips('Hello tips!', '#test5'); }); //====================================== //多窗口模式，层叠置顶 $('#test6').on('click', function(){ layer.open({ type: 2 //此处以iframe举例 ,title: '当你选择该窗体时，即会在最顶端' ,area: ['390px', '330px'] ,shade: 0 ,offset: [ //为了演示，随机坐标 Math.random()*($(window).height()-300) ,Math.random()*($(window).width()-390) ] ,maxmin: true ,content: 'settop.html' ,btn: ['继续弹出', '全部关闭'] //只是为了演示 ,yes: function(){ $(that).click(); //此处只是为了演示，实际使用可以剔除 } ,btn2: function(){ layer.closeAll(); } ,zIndex: layer.zIndex //重点1 ,success: function(layero){ layer.setTop(layero); //重点2 } }); }); //配置一个透明的询问框 $('#test7').on('click', function(){ layer.msg('大部分参数都是可以公用的
合理搭配，展示不一样的风格', { time: 20000, //20s后自动关闭 btn: ['明白了', '知道了', '哦'] }); }); //示范一个公告层 $('#test8').on('click', function(){ layer.open({ type: 1 ,title: false //不显示标题栏 ,closeBtn: false ,area: '300px;' ,shade: 0.8 ,id: 'LAY_layuipro' //设定一个id，防止重复弹出 ,resize: false ,btn: ['火速围观', '残忍拒绝'] ,btnAlign: 'c' ,moveType: 1 //拖拽模式，0或者1 ,content: '内容
内容' ,success: function(layero){ var btn = layero.find('.layui-layer-btn'); btn.find('.layui-layer-btn0').attr({ href: 'http://www.layui.com/' ,target: '_blank' }); } }); }); //边缘弹出 $('#test9').on('click', function(){ layer.open({ type: 1 ,offset: 'c' //具体配置参考：offset参数项(t、r、b、l、c) ,content: '内容' ,btn: '关闭全部' ,btnAlign: 'c' //按钮居中 ,shade: 0 //不显示遮罩 ,yes: function(){ layer.closeAll(); } }); }); });登录后复制
更多layui知识请关注layui使用教程栏目。
以上就是layui-layer独立组件-弹出层介绍的详细内容，更多请关注【创想鸟】其它相关文章！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
