弹框插件self(动效兼容到IE9，功能兼容IE6)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>弹框demo</title>
<link rel="stylesheet" href="css/layer-animate.css"/>
<style>
*{
margin:0;
padding: 0;
}
.btn{
float:left;
font-size: 18px;
margin:30px;
cursor: pointer;
}
</style>
</head>
<body>
<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>
</body>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/method.js"></script>
<script>
//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>
</html>
@keyframes slideFromTop{0%{top:}100%{top:50%}}@-webkit-keyframes slideFromTop{0%{top:}100%{top:50%}}@-moz-keyframes slideFromTop{0%{top:}100%{top:50%}}@-ms-keyframes slideFromTop{0%{top:}100%{top:50%}}@-o-keyframes slideFromTop{0%{top:}100%{top:50%}}@keyframes hideFromTop{0%{top:50%}100%{top:;opacity:}}@-webkit-keyframes hideFromTop{0%{top:50%}100%{top:;opacity:}}@-moz-keyframes hideFromTop{0%{top:50%}100%{top:;opacity:}}@-ms-keyframes hideFromTop{0%{top:50%}100%{top:;opacity:;filter:Alpha(opacity=0)}}@-o-keyframes hideFromTop{0%{top:50%}100%{top:;opacity:}}@keyframes slideFromBottom{0%{top:80%}100%{top:50%}}@-webkit-keyframes slideFromBottom{0%{top:80%}100%{top:50%}}@-moz-keyframes slideFromBottom{0%{top:80%}100%{top:50%}}@-ms-keyframes slideFromBottom{0%{top:80%}100%{top:50%}}@-o-keyframes slideFromBottom{0%{top:80%}100%{top:50%}}@keyframes hideFromBottom{0%{top:50%}100%{top:80%;opacity:}}@-webkit-keyframes hideFromBottom{0%{top:50%}100%{top:80%;opacity:}}@-moz-keyframes hideFromBottom{0%{top:50%}100%{top:80%;opacity:}}@-ms-keyframes hideFromBottom{0%{top:50%}100%{top:80%;opacity:;filter:Alpha(opacity=0)}}@-o-keyframes hideFromBottom{0%{top:50%}100%{top:80%;opacity:}}@keyframes showSweetAlert{0%{transform:scale(0.5)}45%{transform:scale(1.05)}80%{transform:scale(.95)}100%{transform:scale(1)}}@-webkit-keyframes showSweetAlert{0%{-webkit-transform:scale(0.5)}45%{-webkit-transform:scale(1.05)}80%{-webkit-transform:scale(.95)}100%{-webkit-transform:scale(1)}}@-moz-keyframes showSweetAlert{0%{-moz-transform:scale(0.5)}45%{-moz-transform:scale(1.05)}80%{-moz-transform:scale(.95)}100%{-moz-transform:scale(1)}}@-ms-keyframes showSweetAlert{0%{-ms-transform:scale(0.5)}33%{-ms-transform:scale(1.05)}66%{-ms-transform:scale(.95)}100%{-ms-transform:scale(1)}}@-o-keyframes showSweetAlert{0%{-o-transform:scale(0.5)}45%{-o-transform:scale(1.05)}80%{-o-transform:scale(.95)}100%{-o-transform:scale(1)}}@keyframes hideSweetAlert{0%{transform:scale(1)}45%{transform:scale(1.05)}80%{transform:scale(.95)}100%{transform:scale(0);opacity:}}@-webkit-keyframes hideSweetAlert{0%{-webkit-transform:scale(1)}45%{-webkit-transform:scale(1.05)}80%{-webkit-transform:scale(.95)}100%{-webkit-transform:scale(0);opacity:}}@-moz-keyframes hideSweetAlert{0%{-moz-transform:scale(1)}45%{-moz-transform:scale(1.05)}80%{-moz-transform:scale(.95)}100%{-moz-transform:scale(0);opacity:}}@-ms-keyframes hideSweetAlert{0%{-ms-transform:scale(1)}45%{-ms-transform:scale(1.05)}80%{-ms-transform:scale(.95)}100%{-ms-transform:scale(0);opacity:;filter:Alpha(opacity=0)}}@-o-keyframes hideSweetAlert{0%{-o-transform:scale(1)}45%{-o-transform:scale(1.05)}80%{-o-transform:scale(.95)}100%{-o-transform:scale(0);opacity:}}@keyframes layerFadeIn{0%{opacity:;transform:scale(.5)}100%{opacity:;transform:scale(1)}}@-webkit-keyframes layerFadeIn{0%{opacity:;-webkit-transform:scale(.5)}100%{opacity:;-webkit-transform:scale(1)}}@-moz-keyframes layerFadeIn{0%{opacity:;-moz-transform:scale(.5)}100%{opacity:;-moz-transform:scale(1)}}@-ms-keyframes layerFadeIn{0%{opacity:;-ms-transform:scale(.5);filter:Alpha(opacity=0)}100%{opacity:;-ms-transform:scale(1);filter:Alpha(opacity=100)}}@-o-keyframes layerFadeIn{0%{opacity:;-o-transform:scale(.5)}100%{opacity:;-o-transform:scale(1)}}@keyframes hideFadeIn{0%{opacity:;transform:scale(1)}100%{transform:scale(.5);opacity:}}@-webkit-keyframes hideFadeIn{0%{opacity:;-webkit-transform:scale(1)}100%{-webkit-transform:scale(.5);opacity:}}@-moz-keyframes hideFadeIn{0%{opacity:;-moz-transform:scale(1)}100%{-moz-transform:scale(.5);opacity:}}@-ms-keyframes hideFadeIn{0%{opacity:;-ms-transform:scale(1)}100%{-ms-transform:scale(.5);opacity:;filter:Alpha(opacity=0)}}@-o-keyframes hideFadeIn{0%{opacity:;-webkit-transform:scale(1)}100%{-webkit-transform:scale(.5);opacity:}}@keyframes layer-fadeInUpBig{0%{opacity:;transform:translateY(2000px)}100%{opacity:;transform:translateY(0)}}@-webkit-keyframes layer-fadeInUpBig{0%{opacity:;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:;-webkit-transform:translateY(0);transform:translateY(0)}}@-moz-keyframes layer-fadeInUpBig{0%{opacity:;-moz-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:;-moz-transform:translateY(0);transform:translateY(0)}}@-ms-keyframes layer-fadeInUpBig{0%{opacity:;-ms-transform:translateY(2000px);transform:translateY(2000px);filter:Alpha(opacity=0)}100%{opacity:;-ms-transform:translateY(0);transform:translateY(0);filter:Alpha(opacity=100)}}@-o-keyframes layer-fadeInUpBig{0%{opacity:;-o-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:;-o-transform:translateY(0);transform:translateY(0)}}@keyframes hide-fadeInUpBig{0%{opacity:;transform:translateY(0)}100%{opacity:;transform:translateY(2000px)}}@-webkit-keyframes hide-fadeInUpBig{0%{opacity:;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}@-moz-keyframes hide-fadeInUpBig{0%{opacity:;-moz-transform:translateY(0);transform:translateY(0)}100%{opacity:;-moz-transform:translateY(2000px);transform:translateY(2000px)}}@-ms-keyframes hide-fadeInUpBig{0%{opacity:;-ms-transform:translateY(0);transform:translateY(0);filter:Alpha(opacity=100)}100%{opacity:;-ms-transform:translateY(2000px);transform:translateY(2000px);filter:Alpha(opacity=0)}}@-o-keyframes hide-fadeInUpBig{0%{opacity:;-o-transform:translateY(0);transform:translateY(0)}100%{opacity:;-o-transform:translateY(2000px);transform:translateY(2000px)}}@-webkit-keyframes layer-rollIn{0%{opacity:;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:;-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}}@keyframes layer-rollIn{0%{opacity:;transform:translateX(-100%) rotate(-120deg)}100%{opacity:;transform:translateX(0) rotate(0)}}@-moz-keyframes layer-rollIn{0%{opacity:;-moz-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:;-moz-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}}@-ms-keyframes layer-rollIn{0%{opacity:;-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg);filter:Alpha(opacity=0)}100%{opacity:;-ms-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0);filter:Alpha(opacity=100)}}@-o-keyframes layer-rollIn{0%{opacity:;-o-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:;-o-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}}@-webkit-keyframes hide-rollIn{0%{opacity:;-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}100%{opacity:;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}}@keyframes hide-rollIn{0%{opacity:;transform:translateX(0) rotate(0)}100%{opacity:;transform:translateX(-100%) rotate(-120deg)}}@-moz-keyframes hide-rollIn{0%{opacity:;-moz-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}100%{opacity:;-moz-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}}@-ms-keyframes hide-rollIn{0%{opacity:;-ms-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0);filter:Alpha(opacity=100)}100%{opacity:;-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg);filter:Alpha(opacity=0)}}@-o-keyframes hide-rollIn{0%{opacity:;-o-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}100%{opacity:;-o-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}}@keyframes layer-fadeIn{0%{opacity:}100%{opacity:}}@-webkit-keyframes layer-fadeIn{0%{opacity:}100%{opacity:}}@-moz-keyframes layer-fadeIn{0%{opacity:}100%{opacity:}}@-o-keyframes layer-fadeIn{0%{opacity:}100%{opacity:}}@-ms-keyframes layer-fadeIn{0%{opacity:;filter:Alpha(opacity=0)}100%{opacity:;filter:Alpha(opacity=100)}}@keyframes hide-fadeIn{0%{opacity:}100%{opacity:}}@-webkit-keyframes hide-fadeIn{0%{opacity:}100%{opacity:}}@-moz-keyframes hide-fadeIn{0%{opacity:}100%{opacity:}}@-o-keyframes hide-fadeIn{0%{opacity:}100%{opacity:}}@-ms-keyframes hide-fadeIn{0%{opacity:}100%{opacity:;filter:Alpha(opacity=0)}}@-webkit-keyframes layer-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes layer-shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}@-moz-keyframes layer-shake{0%,100%{-moz-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-moz-transform:translateX(10px);transform:translateX(10px)}}@-ms-keyframes layer-shake{0%,100%{-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-ms-transform:translateX(10px);transform:translateX(10px)}}@-o-keyframes layer-shake{0%,100%{-o-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-o-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-o-transform:translateX(10px);transform:translateX(10px)}}@-webkit-keyframes hide-shake{0%,100%{-webkit-transform:translateX(10px);transform:translateX(10px)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:}}@keyframes hide-shake{0%,100%{transform:translateX(10px)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(0)}100%{opacity:}}@-moz-keyframes hide-shake{0%,100%{-moz-transform:translateX(10px);transform:translateX(10px)}
10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-moz-transform:translateX(0);transform:translateX(0)}100%{opacity:}}@-ms-keyframes hide-shake{0%,100%{-ms-transform:translateX(10px);transform:translateX(10px)}10%,30%,50%,70%,90%{-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:;filter:Alpha(opacity=0)}}@-o-keyframes hide-shake{0%,100%{-o-transform:translateX(10px);transform:translateX(10px)}10%,30%,50%,70%,90%{-o-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-o-transform:translateX(0);transform:translateX(0)}100%{opacity:}}@keyframes layer-spread{0%{transform:scaleX(0);opacity:}100%{transform:scaleX(1);opacity:}}@-webkit-keyframes layer-spread{0%{-webkit-transform:scaleX(0);opacity:}100%{-webkit-transform:scaleX(1);opacity:}}@-moz-keyframes layer-spread{0%{-moz-transform:scaleX(0);opacity:}100%{-moz-transform:scaleX(1);opacity:}}@-o-keyframes layer-spread{0%{-o-transform:scaleX(0);opacity:}100%{-o-transform:scaleX(1);opacity:}}@-ms-keyframes layer-spread{0%{-ms-transform:scaleX(0);opacity:;filter:Alpha(opacity=0)}100%{-ms-transform:scaleX(1);opacity:;filter:Alpha(opacity=100)}}@keyframes hide-spread{0%{transform:scaleX(1)}50%{transform:scaleX(.5)}100%{transformX:scaleX(0%);opacity:}}@-webkit-keyframes hide-spread{0%{-webkit-transform:scaleX(1)}50%{-webkit-transform:scaleX(.5)}100%{-webkit-transform:scaleX(0);opacity:}}@-moz-keyframes hide-spread{0%{-moz-transform:scaleX(1)}50%{-moz-transform:scaleX(.5)}100%{-moz-transform:scaleX(0);opacity:}}@-ms-keyframes hide-spread{0%{-ms-transform:scaleX(1)}50%{-ms-transform:scaleX(.5)}100%{-ms-transform:scaleX(0);opacity:;filter:Alpha(opacity=0)}}.showAlert[data-animation=layerFadeIn]{animation:layerFadeIn .3s;-webkit-animation:layerFadeIn .3s;-moz-animation:layerFadeIn .3s;-ms-animation:layerFadeIn .3s;-o-animation:layerFadeIn .3s}.showAlert[data-animation=showSweetAlert]{animation:showSweetAlert .3s;-webkit-animation:showSweetAlert .3s;-moz-animation:showSweetAlert .3s;-ms-animation:showSweetAlert .3s;-o-animation:showSweetAlert .3s}.showAlert[data-animation=none]{animation:none;-webkit-animation:none;-moz-animation:none;-ms-animation:none;-o-animation:none}.showAlert[data-animation=slideFromTop]{animation:slideFromTop .3s;-webkit-animation:slideFromTop .3s;-moz-animation:slideFromTop .3s;-ms-animation:slideFromTop .3s;-o-animation:slideFromTop .3s}.showAlert[data-animation=slideFromBottom]{animation:slideFromBottom .2s;-webkit-animation:slideFromBottom .2s;-moz-animation:slideFromBottom .2s;-ms-animation:slideFromBottom .2s;-o-animation:slideFromBottom .2s}.showAlert[data-animation=layer-fadeInUpBig]{animation:layer-fadeInUpBig .2s;-webkit-animation:layer-fadeInUpBig .2s;-moz-animation:layer-fadeInUpBig .2s;-ms-animation:layer-fadeInUpBig .2s;-o-animation:layer-fadeInUpBig .2s}.showAlert[data-animation=layer-rollIn]{animation:layer-rollIn .3s;-webkit-animation:layer-rollIn .3s;-moz-animation:layer-rollIn .3s;-ms-animation:layer-rollIn .3s;-o-animation:layer-rollIn .3s}.showAlert[data-animation=layer-fadeIn]{animation:layer-fadeIn .3s;-webkit-animation:layer-fadeIn .3s;-moz-animation:layer-fadeIn .3s;-ms-animation:layer-fadeIn .3s;-o-animation:layer-fadeIn .3s}.showAlert[data-animation=layer-shake]{animation:layer-shake .3s;-webkit-animation:layer-shake .3s;-moz-animation:layer-shake .3s;-ms-animation:layer-shake .3s;-o-animation:layer-shake .3s}.showAlert[data-animation=layer-spread]{animation:layer-spread .2s;-webkit-animation:layer-spread .2s;-moz-animation:layer-spread .2s;-ms-animation:layer-spread .2s;-o-animation:layer-spread .2s}.hideAlert[data-animation=layer-spread]{animation:hide-spread .5s forwards;-webkit-animation:hide-spread .5s forwards;-moz-animation:hide-spread .5s forwards;-ms-animation:hide-spread .5s forwards;-o-animation:hide-spread .5s forwards}.hideAlert[data-animation=slideFromTop]{animation:hideFromTop .2s forwards;-webkit-animation:hideFromTop .2s forwards;-moz-animation:hideFromTop .2s forwards;-ms-animation:hideFromTop .2s forwards;-o-animation:hideFromTop .2s forwards}.hideAlert[data-animation=slideFromBottom]{animation:hideFromBottom .2s forwards;-webkit-animation:hideFromBottom .2s forwards;-moz-animation:hideFromBottom .2s forwards;-ms-animation:hideFromBottom .2s forwards;-o-animation:hideFromBottom .2s forwards}.hideAlert[data-animation=showSweetAlert]{animation:hideSweetAlert .2s forwards;-webkit-animation:hideSweetAlert .2s forwards;-moz-animation:hideSweetAlert .2s forwards;-ms-animation:hideSweetAlert .2s forwards;-o-animation:hideSweetAlert .2s forwards}.hideAlert[data-animation=layerFadeIn]{animation:hideFadeIn .2s forwards;-webkit-animation:hideFadeIn .2s forwards;-moz-animation:hideFadeIn .2s forwards;-ms-animation:hideFadeIn .2s forwards;-o-animation:hideFadeIn .2s forwards}.hideAlert[data-animation=layer-fadeIn]{animation:hide-fadeIn .2s forwards;-webkit-animation:hide-fadeIn .2s forwards;-moz-animation:hide-fadeIn .2s forwards;-ms-animation:hide-fadeIn .2s forwards;-o-animation:hide-fadeIn .2s forwards}.hideAlert[data-animation=layer-fadeInUpBig]{animation:hide-fadeInUpBig .2s forwards;-webkit-animation:hide-fadeInUpBig .2s forwards;-moz-animation:hide-fadeInUpBig .2s forwards;-ms-animation:hide-fadeInUpBig .2s forwards;-o-animation:hide-fadeInUpBig .2s forwards}.hideAlert[data-animation=layer-rollIn]{animation:hide-rollIn .2s forwards;-webkit-animation:hide-rollIn .2s forwards;-moz-animation:hide-rollIn .2s forwards;-ms-animation:hide-rollIn .2s forwards;-o-animation:hide-rollIn .2s forwards}.hideAlert[data-animation=layer-shake]{animation:hide-shake .2s forwards;-webkit-animation:hide-shake .2s forwards;-moz-animation:hide-shake .2s forwards;-ms-animation:hide-shake .2s forwards;-o-animation:hide-shake .2s forwards}.msg-layer-bg{width:100%;z-index:;position:fixed;background:#000;opacity:.4;top:;height:100%;filter:alpha(opacity=50)}.msg-layer{z-index:;position:fixed;left:50%;top:50%;text-align:center;opacity:;filter:alpha(opacity=100);padding:0 10px 10px;background:#fff;border-radius:5px;max-width:800px}.msg-con{padding:10px;word-break:break-all}.layer-close{display:none;position:absolute;right:10px;top:;font-size:32px;color:#d02f30;height:30px;line-height:30px;cursor:pointer}.msg-layer>h5{font-size:18px;line-height:38px;border-bottom:1px solid #ccc}.layer-btn{padding:16px 0 10px;text-align:center}.layer-btn>div{display:none;width:100px;height:36px;line-height:36px;text-align:center;color:#fff;font-size:14px;border-radius:5px;cursor:pointer}.layer-cancel{background:#ccc9c9}.layer-commit{background:#50bce0;margin-left:10px}
layer-animate.css
var method={
msg_layer:function(obj){
//弹框
$(".msg-layer-bg,.msg-layer").remove();
$("body").append( '<div class="msg-layer-bg"></div><div class="msg-layer showAlert"><h5></h5><div class="msg-con"></div><div class="layer-close">×</div><div class="layer-btn"><div class="layer-cancel"></div><div class="layer-commit"></div></div></div>');
var _layerBg=$(".msg-layer-bg"),_layer=$(".msg-layer"),_close=$(".layer-close"),_cansel=$(".layer-cancel"),_commit=$(".layer-commit");
_layer.attr("data-animation",obj.type);
var winH=$(window).height(),winW=$(window).width();
if(obj.title){
_layer.find("h5").html(obj.title);
}else{
_layer.find("h5").css("display","none")
}
_layer.find($(".msg-con")).html(obj.content);
_layerBg.css({"display":"block"});
if(!obj.close || obj.close == "true"){
//关闭按钮
_close.css("display","block");
_close.on("click",function(){
method.msg_close();
})
}else{
_close.css("display","none");
}
if(obj.area){
//宽高
if(obj.area[0] != "auto" && obj.area[1] != "auto"){
_layer.css({"width":obj.area[0],"height":obj.area[1],"left":winW/2-parseFloat(obj.area[0])/2,"top":winH/2-parseFloat(obj.area[1])/2});
}else if(obj.area[0] != "auto" && obj.area[1] === "auto"){
_layer.css({"width":obj.area[0],"height":obj.area[1],"left":winW/2-parseFloat(obj.area[0])/2,"top":winH/2-(_layer.height()+20)/2});
}else if(obj.area[0] === "auto" && obj.area[1] != "auto"){
_layer.css({"width":_layer.width()+20,"height":obj.area[1],"left":winW/2-(_layer.width()+20)/2,"top":winH/2-parseFloat(obj.area[1])/2});
}
}else{
_layer.css({"width":_layer.width()+20,"height":_layer.height()+30,"left":winW/2-(_layer.width()+20)/2,"top":winH/2-(_layer.height()+30)/2});
}
if(obj.btn){
//按钮
if(obj.btn[0] != 0){
_cansel.css("display","inline-block");
_cansel.html(obj.btn[0]);
_cansel.on("click",function(){
method.msg_close();
})
}
if(obj.btn[1] != 0){
_commit.css("display","inline-block");
_commit.html(obj.btn[1]);
}
}
},
msg_close:function(){
//关闭弹框
var timer=null;
$(".msg-layer").removeClass('showAlert').addClass("hideAlert");
timer=setTimeout(function(){
clearTimeout(timer);
$(".msg-layer-bg").remove();
$(".msg-layer").remove();
},200);
}
};
method.js
弹框插件self(动效兼容到IE9，功能兼容IE6)的更多相关文章
- 自己写的基于bootstrap风格的弹框插件
自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...
- vue项目中使用vue-layer弹框插件
vue-layer弹框插件 安装 npm i --save vue-layer 引用 import layer from 'vue-layer' Vue.prototype.$layer = lay ...
- jquery Dialog弹框插件
function Dialog(options) { var defaults = { // 默认值. title: '', // 标题文本,若不想显示title请通过CSS设置其display为no ...
- 自己写的jquery 弹框插件
html部分 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
- SweetAlert插件 弹框插件
sweetalert是一个漂亮的弹窗 中文网址: http://mishengqiang.com/sweetalert/ 它需要2个文件:sweetalert-dev.js和sweetalert.cs ...
- SweetAler弹框插件与分页器插件
目录 SweetAlert插件 自定义分页器 使用Django向数据库批量插入数据 自定义分页器的思路 自定义分页器组件 SweetAlert插件 sweetalert是一款基于Bootstrap的专 ...
- jquery Dialog弹框插件使用
var dialog = new Dialog({ title: '购物车', type: 'url', width: 520, content: "Uplolo.aspx", s ...
- layer弹框插件使用
需要在jquery之后导入 <link rel="stylesheet" href="${pageContext.request.contextPath }/js/ ...
- M站 滚动日历弹框
先放张效果图: 完整Demo: <!DOCTYPE html> <html lang="en"> <head> <meta http-eq ...
随机推荐
- 用INFORMATION_SCHEMA逻辑MySQL的索引
分库分表的场景下,变更目前还不知道有哪个表变更索引失败,是不是所有的表都变更成功了,所以可以从INFORMATION_SCHEMA通过罗列索引个数,或者查看索引行,就可以知道是不是所有的都变更成功了: ...
- Java如何大批量从json数据源中按指定符号隔字符串，并修改、删除数据
原文出自:https://blog.csdn.net/seesun2012 package com.seesun2012.com; /** * Java大批量修改.删除数据,按指定标识符分隔字符串 * ...
- rust by example 2
本来这篇准备明天在写的,但正好今天的Release没出问题,就接着写吧 rust里的原生类型: 有符号整数: i8, i16, i32, i64和isize(指针大小) 无符号整数:u8, u16, ...
- 多线程-lock锁
package 多线程.lock锁; import java.util.concurrent.locks.ReentrantLock; /*. * * //同步代码块 * * */ public cl ...
- Spring学习笔记：spring整合web之spring-web架包的引用（WebApplicationContextUtils注入容器）
WebApplicationContextUtils 一.Spring整合web之前 案例:给部门列表添加新部门 import org.apache.log4j.Logger; import org. ...
- 撩课-Web大前端每天5道面试题-Day15
1.请描述一下 cookies,sessionStorage 和 localStorage 的区别? cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过 ...
- src/main/resources文件夹
Error starting ApplicationContext. To display the auto-configuration report re-run your application ...
- [LeetCode]Longest Substring Without Repeating Characters题解
Longest Substring Without Repeating Characters: Given a string, find the length of the longest subst ...
- 记录一次使用terminal进行git管理与提交到Github的过程
1.环境的构建: 使用Mac系统自带的Git进行版本管理存在,Git是系统的Xcode集成的 查看版本的命令: $ git --version git version (Apple Git-) 查看g ...
- Luogu 4240：毒瘤之神的考验
传送门 Sol 分开考虑 \(\varphi(ij)\) 中 \(ij\) 的质因子 那么 \[\varphi(ij)=\frac{\varphi(i)\varphi(j)gcd(i,j)}{\var ...