Layer弹窗的用法：
<script src="jQuery的路径"></script> <!-- 你必须先引入jQuery1.8或以上版本 -->
<script src="layer.js的路径"></script>
Layer的open方法：
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script src="js/layer/layer.js" type="text/javascript"></script>
</head>
<body>
<style>
.test{width: 300px; height: 300px; background:#ddd; color: #ff0000; margin:200px auto; text-align: center; font-size: 16px; font-family:Microsoft YaHei;}
fieldset{border: none; border-top: 1px solid #333;}
</style>
<div class="test" style=" color: #ff0000;">
<fieldset>
<legend>这是弹窗测试页面</legend>
<p>这是弹窗测试页面</p>
<input type="button" value="点击触发弹窗" class="testlayer">
</fieldset>
</div> <script>
$(function(){
layer.config({
skin: 'layui-layer-lan'
})
/*layer.open({
//skin: 'demo-class'
});*/
$(".testlayer").on("click",function(){
layer.open({
type: 1,
title:"测试",
closeBtn:0, //右上角关闭按钮
//skin: 'layui-layer-rim', //加上边框
area: ['450px', '250px'], //宽高
anim:2,//弹出动画
btn:['确定购买','取消购买'],//按钮
content: '<p style=" text-align: center;">html内容</p>',//弹窗内容
//maxmin:true,//最大最小化按钮
resize:false,//是否允许拉伸
yes:function(index,layerdom){
layer.close(index);
console.log("你点击了确定按钮");
},
btn2:function(index,layerdom){
console.log("你点击了取消按钮");//输出日志
//return false;//开启该代码可以禁止点击该按钮关闭
},
cancel:function(index,layerdom){
console.log("你点击了右上角的关闭按钮");
}
});
}); })
</script>
</body>
</html>