HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>layer</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="layer/layer.js"></script> <script type="text/javascript" src="js/index.js"></script> </head> <body> <div class="btn"> <button onclick="MyClick1()">alert弹框美化</button> <button onclick="MyClick2()">提示框美化</button> <button onclick="MyClick3()">信息框</button> <button onclick="MyClick4()">弹出div登录层</button> </div> <div id="box"> <div class="box-con"> <input type="text"> </div> <div class="box-con"> <input type="text"> </div> <div class="box-con"> <a href="javascript:;">登录</a> </div> </div> </body> </html>
CSS
*{ padding: 0; margin: 0; font-family: "华文行楷"; } button{ width: 300px; height: 60px; color: #fff; background-color: purple; font-size: 44px; } .box-con input{ width: 350px; height: 42px; } .box-con a{ width: 354px; height: 50px; background-color: #30c; display: block; text-align: center; line-height: 50px; color: #fff; font-size: 30px; text-decoration: none; } .box-con{ margin-left: 20px; margin-top: 15px; } #box{ display: none; }
JS
function MyClick1(){ //alert弹框美化 layer.alert("你好",{ title:"说明", icon:7, skin:"layui-layer-molv" }); } function MyClick2(){ //提示框美化 layer.confirm("你确定吗?",{ title:"提示", icon:3 },function(){ layer.alert("删除成功!",{icon:6}); },function(){ layer.alert("删除失败!",{icon:5}); }); } function MyClick3(){ //信息框 layer.msg("我是一个非常普通的信息框",{ icon:1, time:2000 },function(){ //隐藏之后要做的事 location.href = "http://www.cnblogs.com/Harold-Hua/"; }); } function MyClick4(){ //弹出div登录层 layer.open({ type:1, title:"登录", area:["390px","270px"], content:$("#box") }); }