就当记事本 记下来 ,以后用直接打开
可以直接下载demo 链接:https://pan.baidu.com/s/1hLeLtzaXPRy9Vbt5IIOGMw
提取码:tjug
复制这段内容后打开百度网盘手机App,操作更方便哦
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/layer-animate.css">
<style>
*{
margin:0;
padding: 0;
}
</style>
</head>
<div class="btn btn1">从上滑落</div>
<div class="btn btn2">从下划入</div>
<div class="btn btn3">中间扩散</div>
<div class="btn btn4">中间扩散渐入</div>
<div class="btn btn5">从下方平滑进入</div>
<div class="btn btn6">翻转</div>
<div class="btn btn7">晃动</div>
<div class="btn btn8">左右伸缩</div>
<div class="btn btn9">透明度渐入</div>
<div class="btn btn10">无动效弹框</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/method.js"></script>
<script type="text/javascript">
//type值用来切换显示效果slideFromTop、slideFromBottom、showSweetAlert、none、layerFadeIn、layer-fadeInUpBig、layer-rollIn、layer-shake、layer-spread、layer-fadeIn
$(".btn1").on("click",function(){
var obj={
type:"slideFromTop",
//close属性为false为没有关闭按钮,close属性为true或无close属性则有关闭按钮
close:"false",
content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
//值为0的时候,则表示不显示该按钮。否则显示该按钮
btn:["取消","保存"]
};
method.msg_layer(obj);
});
$(".btn2").on("click",function(){
var obj={
type:"slideFromBottom",
//有title属性的话,则有标题,标题内容为title值,无title属性则无标题
title:"弹框标题",
content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
area:["500px","200px"],
btn:[0,"保存"]
};
method.msg_layer(obj);
});
$(".btn3").on("click",function(){
var obj={
type:"showSweetAlert",
title:"弹框标题",
content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
area:["500px","auto"],
btn:["取消","提交"]
};
method.msg_layer(obj);
});
$(".btn4").on("click",function(){
var obj={
type:"layerFadeIn",
title:"弹框标题",
close:"true",
content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
area:["auto","150px"],
btn:["取消",0]
};
method.msg_layer(obj);
});
$(".btn5").on("click",function(){
var obj={
type:"layer-fadeInUpBig",
title:"弹框标题",
content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
area:["500px","200px"]
};
method.msg_layer(obj);
});
$(".btn6").on("click",function(){
var obj={
type:"layer-rollIn",
title:"弹框标题",
content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
area:["500px","200px"]
};
method.msg_layer(obj);
});
$(".btn7").on("click",function(){
var obj={
type:"layer-shake",
title:"弹框标题",
content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
area:["500px","200px"]
};
method.msg_layer(obj);
});
$(".btn8").on("click",function(){
var obj={
type:"layer-spread",
title:"弹框标题",
content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
area:["300px","200px"]
};
method.msg_layer(obj);
});
$(".btn9").on("click",function(){
var obj={
type:"layer-fadeIn",
title:"弹框标题",
content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
};
method.msg_layer(obj);
});
$(".btn10").on("click",function(){
var obj={
type:"none",
title:"弹框标题",
content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
area:["500px","200px"]
};
method.msg_layer(obj);
});
$("body").delegate(".msg-layer-bg","click",function(){
method.msg_close()
});
</script>
</div>
</body>
</html>