弹框插件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 ...
随机推荐
- 在ViewDidLoad中往导航栈推ViewController报错
Unbalanced calls to begin/end appearance transitions for <YZPMainViewController: 0x7fa04b4970f0& ...
- [译]用R语言做挖掘数据《四》
回归 一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou,密码shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环境,实验中会用到程序: 1. ...
- 四大CPU体系结构：ARM、X86/Atom、MIPS、PowerPC
补充介绍一下RISC:RISC(reduced instruction set computer,精简指令集计算机)是一种执行较少类型计算机指令的微处理器,起源于80年代的MIPS主机(即RISC机) ...
- [转]SAP模块一句话入门
本文转自:http://www.cnblogs.com/mybi/archive/2010/12/20/1911154.html SAP一句话入门:Financial & Controllin ...
- jquery操作radio单选按钮，实现取值，动态选中，动态删除的各种方法
本文主要讲的是在jquery里操作表单radio单选按钮的各种方法,如获取选中的radio的值,动态选中指定的radio项等. 1.获取选中的radio单选按钮的值: var v=$(":r ...
- 三、hdfs的JavaAPI操作
下文展示Java的API如何操作hdfs,在这之前你需要先安装配置好hdfs https://www.cnblogs.com/lay2017/p/9919905.html 依赖 你需要引入依赖如下 & ...
- 04-Tomcat体系结构与插件配置
一.发布程序详解 Context docBase:web应用的文件路径 path:URL入口 reloadable:字节码变化服务器是否重新加载web应用 二.tomcat服务器体系结构 1.Serv ...
- JSON 解析的可抛弃
先看例子, json文件中有些元素不是我们想要的,在反序列化时可以当它们不存在,下面例子抛弃了 aaa.ccc这两节. package main import ( "encoding ...
- CSS属性之padding
0.inline元素中的padding 大家都知道padding对于block元素和inline-block元素的影响,而对于inline元素,padding只会在水平方向产生影响,垂直方向不会产生影 ...
- spring 与springmvc容器的关系
spring容器是springmvc的父容器,而父容器是不能访问子容器中的东西,但子容器可以访问父容器的东西