弹框插件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 ...
随机推荐
- UOJ #188. 【UR #13】Sanrd
Description 给定 \(\sum_{i=l}^r f[i]\) \(f[i]=\) 把 \(i\) 的每一个质因子都从小到大排列成一个序列(\(p_i^{c_i}\)要出现 \(c_i\) ...
- 【转】Windows 平台下 Go 语言的安装和环境变量设置
1. Go 语言 SDK 安装包下载和安装 最新稳定版 1.5.3 安装包 go1.5.3.windows-amd64.msi下载地址 https://golang.org/dl/,大小约 69 MB ...
- 三：Bootstrap-js插件
模式框: <button class="btn btn-default btn-lg" data-toggle="modal" data-target=& ...
- 【SSH网上商城项目实战18】过滤器实现购物登录功能的判断
转自:https://blog.csdn.net/eson_15/article/details/51425010 上一节我们做完了购物车的基本操作,但是有个问题是:当用户点击结算时,我们应该做一个登 ...
- javaweb浏览器url上项目名称的更改
如何改变上面url项目名称地址,如把04去掉改成teachershare 如下图:在项目设置中设置web context-root属性,将04去掉. 就可以用这个登录了. 要注意的是如果之前已经部署在 ...
- Ubuntu重启网卡的三种方法
一.network利用root帐户# service network restart 或者/etc/init.d/networking restart 二.ifdown/ifup# ifdown et ...
- Luogu4433：[COCI2009-2010#1] ALADIN(类欧几里德算法)
先套用一个线段树维护离散化之后的区间的每一段的答案 那么只要考虑怎么下面的东西即可 \[\sum_{i=1}^{n}(A\times i \ mod \ B)\] 拆开就是 \[\sum_{i=1}^ ...
- C#读取Json文件
C#读取Json文件并赋值给初始值 一.有Json文件如下(若用记事本编辑记得另存为-编码选择 U-TF8): 二.读取方法: using Newtonsoft.Json;using Newtonso ...
- sublime text3 jQuery Emmet 插件 安装方法,快捷键
preference->package control->install package> emmet / jQuery 先说jQuery jQuery 集成了很多JS的补全功能.例 ...
- 实现键盘记录的e.Whick和keyCode,兼容FireFox和IE
主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,k ...