关于layui-layer独立组件--弹出层
官方下载文档链接：http://layer.layui.com/
===============================================================================
【注意事项】
一、使用时，请把文件夹layer整个放置在您站点的任何一个目录，只需引入layer.js即可，除jQuery外，其它文件无需再引入。
二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您可以通过layer.config()来配置（详见官网API页）
三、jquery需1.8+
四、更多使用说明与演示，请参见layer官网。
=======================================================================================
快速上手文档：http://layer.layui.com/hello.html
下载layer后，把它部署到你项目中的任何一个目录（当然，我们推荐放在前端相关目录里），你不能去挪动layer里面的文件结构，因为它们是不可拆散的组合。就像这样：(特别说明：需要把整个layer文件夹引入你的文件中，而不是单单引入layer.js文件)
你不必去管那些文件是干嘛的，你只需要认准一个文件：layer.js 没错，当你试图在页面呈现layer的时候，你应该这样去做：（最简单的示例）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/layer.css"/> <style type="text/css"> .btn{ width: 100%; height: 50px; line-height: 50px; background: magenta; text-align: center; font-size: 15px; } </style> </head> <body> <div class="btn">点我</div> <!--你必须先引入jQuery1.8或以上版本--> <script src="js/jquery-2.1.0.js"></script> <script src="js/layer/layer.js"></script> <script> $(".btn").bind("click",function(){ layer.msg(\'点我的人最美！\'); }); </script> </body> </html>
$("#btn").bind("click",function(){
//layer.msg(\'点我的人最美！\');
layer.msg(\'此商品不存在或者已下架，看看其他商品吧！\', {
time: 3000
});
});
更多示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/layer.css"/> <style type="text/css"> .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; } </style> </head> <body> <div class="btn" id="btn">点我.btn</div> <div class="btn" id="test2">点我test2</div> <div class="btn" id="parentIframe">点我parentIframe</div> <div class="btn" id="test4">点我test4</div> <div class="btn" id="test5">点我test5</div> <!--你必须先引入jQuery1.8或以上版本--> <script src="js/jquery-2.1.0.js"></script> <script src="js/layer/layer.js"></script> <script> $(function(){ $("#btn").bind("click",function(){ layer.msg(\'点我的人最美！\'); }); //弹出一个页面层 $(\'#test2\').on(\'click\', function(){ layer.open({ type: 1, area: [\'600px\', \'360px\'], shadeClose: true, //点击遮罩关闭 content: \'\<\div style="padding:20px;">自定义内容--添加自己需要的描述内容\<\/div>\' }); }); //弹出一个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\'); }); }); </script> </body> </html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/layer.css"/> <style type="text/css"> .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; } </style> </head> <body> <div class="btn" id="btn">点我.btn</div> <div class="btn" id="test2">点我test2</div> <div class="btn" id="parentIframe">点我parentIframe</div> <div class="btn" id="test4">点我test4</div> <div class="btn" id="test5">点我test5</div> <div class="btn" id="test6">点我test6</div> <div class="btn" id="test7">点我test7</div> <div class="btn" id="test8">点我test8</div> <div class="btn" id="test9">点我test9</div> <!--你必须先引入jQuery1.8或以上版本--> <script src="js/jquery-2.1.0.js"></script> <script src="js/layer/layer.js"></script> <script> $(function(){ $("#btn").bind("click",function(){ layer.msg(\'点我的人最美！\'); }); //弹出一个页面层 $(\'#test2\').on(\'click\', function(){ layer.open({ type: 1, area: [\'600px\', \'360px\'], shadeClose: true, //点击遮罩关闭 content: \'\<\div style="padding:20px;">自定义内容--添加自己需要的描述内容\<\/div>\' }); }); //弹出一个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(\'大部分参数都是可以公用的<br>合理搭配，展示不一样的风格\', { 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: \'<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">内容<br>内容</div>\' ,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: \'<div style="padding: 20px 80px;">内容</div>\' ,btn: \'关闭全部\' ,btnAlign: \'c\' //按钮居中 ,shade: 0 //不显示遮罩 ,yes: function(){ layer.closeAll(); } }); }); }); </script> </body> </html>
版权声明：本文为xiangru0921原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。