弹框插件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 ...
随机推荐
- ExcelHelper----根据指定样式的数据，生成excel（一个sheet1页）文件流
/// <summary> /// Excel导出类 /// </summary> public class ExcelHelper { /// <summary> ...
- JAVA练手--链表
package tet; import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; impo ...
- Python——爬虫学习1
爬虫了解一下 网络爬虫(Web crawler),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本. Python的安装 本篇教程采用Python3 来写,所以你需要给你的电脑装上Python ...
- vs2015中的数据库架构对比工具（New Schema Comparison）
大家都知道VS里的功能多到你根本没用过,今天来说说这个New Schema Comparison,他能做的事情就是在vs中对比我们两个数据库的架构.结构,并且能够更新过去或者生成脚本. Step.1( ...
- poj 1088(DP+递归)
这题状态方程很容易得到:DP[i][j] = max(DP[i-1][j],DP[i+1][j],DP[i][j-1],DP[i][j+1]) + 1 难点在于边界条件和剪枝,因为这方程的条件是点在m ...
- 自定义select 小三角
把select小三角换成自己的图片 效果: css样式: <style> #my_select { display: flex; display: -webkit-flex; width: ...
- 多项式乘法，FFT与NTT
多项式: 多项式?不会 多项式加法: 同类项系数相加: 多项式乘法: A*B=C $A=a_0x^0+a_1x^1+a_2x^2+...+a_ix^i+...+a_{n-1}x^{n-1}$ $B=b ...
- react context toggleButton demo
//toggleButton demo: //code: //1.Appb.js: import React from 'react'; import {ThemeContext, themes} f ...
- vue-cli新建一个项目
零.我想把项目安装在C:\www\Arup.DAH.ABCD\SourceCode\FrontEnd这个目录下,所以在我想安装的位置,Shift+右键-->powershell窗口,打开下图位置 ...
- 命令行下运行 java someClass.class出现 “错误：找不到或无法加载主类someClass ” 的解决方案
假设在C:\Java\code\目录下建立了如下 Test.java文件: package code; public class Test { public static void main(Stri ...