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:;
margin:;
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")
});
}
