zoukankan      html  css  js  c++  java

  • 弹框插件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>
    View Code
    @keyframes slideFromTop{0%{top:0}100%{top:50%}}@-webkit-keyframes slideFromTop{0%{top:0}100%{top:50%}}@-moz-keyframes slideFromTop{0%{top:0}100%{top:50%}}@-ms-keyframes slideFromTop{0%{top:0}100%{top:50%}}@-o-keyframes slideFromTop{0%{top:0}100%{top:50%}}@keyframes hideFromTop{0%{top:50%}100%{top:0;opacity:0}}@-webkit-keyframes hideFromTop{0%{top:50%}100%{top:0;opacity:0}}@-moz-keyframes hideFromTop{0%{top:50%}100%{top:0;opacity:0}}@-ms-keyframes hideFromTop{0%{top:50%}100%{top:0;opacity:0;filter:Alpha(opacity=0)}}@-o-keyframes hideFromTop{0%{top:50%}100%{top:0;opacity:0}}@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:0}}@-webkit-keyframes hideFromBottom{0%{top:50%}100%{top:80%;opacity:0}}@-moz-keyframes hideFromBottom{0%{top:50%}100%{top:80%;opacity:0}}@-ms-keyframes hideFromBottom{0%{top:50%}100%{top:80%;opacity:0;filter:Alpha(opacity=0)}}@-o-keyframes hideFromBottom{0%{top:50%}100%{top:80%;opacity:0}}@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:0}}@-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:0}}@-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:0}}@-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:0;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:0}}@keyframes layerFadeIn{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}@-webkit-keyframes layerFadeIn{0%{opacity:0;-webkit-transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1)}}@-moz-keyframes layerFadeIn{0%{opacity:0;-moz-transform:scale(.5)}100%{opacity:1;-moz-transform:scale(1)}}@-ms-keyframes layerFadeIn{0%{opacity:0;-ms-transform:scale(.5);filter:Alpha(opacity=0)}100%{opacity:1;-ms-transform:scale(1);filter:Alpha(opacity=100)}}@-o-keyframes layerFadeIn{0%{opacity:0;-o-transform:scale(.5)}100%{opacity:1;-o-transform:scale(1)}}@keyframes hideFadeIn{0%{opacity:1;transform:scale(1)}100%{transform:scale(.5);opacity:0}}@-webkit-keyframes hideFadeIn{0%{opacity:1;-webkit-transform:scale(1)}100%{-webkit-transform:scale(.5);opacity:0}}@-moz-keyframes hideFadeIn{0%{opacity:1;-moz-transform:scale(1)}100%{-moz-transform:scale(.5);opacity:0}}@-ms-keyframes hideFadeIn{0%{opacity:1;-ms-transform:scale(1)}100%{-ms-transform:scale(.5);opacity:0;filter:Alpha(opacity=0)}}@-o-keyframes hideFadeIn{0%{opacity:1;-webkit-transform:scale(1)}100%{-webkit-transform:scale(.5);opacity:0}}@keyframes layer-fadeInUpBig{0%{opacity:0;transform:translateY(2000px)}100%{opacity:1;transform:translateY(0)}}@-webkit-keyframes layer-fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-moz-keyframes layer-fadeInUpBig{0%{opacity:0;-moz-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-moz-transform:translateY(0);transform:translateY(0)}}@-ms-keyframes layer-fadeInUpBig{0%{opacity:0;-ms-transform:translateY(2000px);transform:translateY(2000px);filter:Alpha(opacity=0)}100%{opacity:1;-ms-transform:translateY(0);transform:translateY(0);filter:Alpha(opacity=100)}}@-o-keyframes layer-fadeInUpBig{0%{opacity:0;-o-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-o-transform:translateY(0);transform:translateY(0)}}@keyframes hide-fadeInUpBig{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(2000px)}}@-webkit-keyframes hide-fadeInUpBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}@-moz-keyframes hide-fadeInUpBig{0%{opacity:1;-moz-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(2000px);transform:translateY(2000px)}}@-ms-keyframes hide-fadeInUpBig{0%{opacity:1;-ms-transform:translateY(0);transform:translateY(0);filter:Alpha(opacity=100)}100%{opacity:0;-ms-transform:translateY(2000px);transform:translateY(2000px);filter:Alpha(opacity=0)}}@-o-keyframes hide-fadeInUpBig{0%{opacity:1;-o-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-o-transform:translateY(2000px);transform:translateY(2000px)}}@-webkit-keyframes layer-rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}}@keyframes layer-rollIn{0%{opacity:0;transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;transform:translateX(0) rotate(0)}}@-moz-keyframes layer-rollIn{0%{opacity:0;-moz-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-moz-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}}@-ms-keyframes layer-rollIn{0%{opacity:0;-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg);filter:Alpha(opacity=0)}100%{opacity:1;-ms-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0);filter:Alpha(opacity=100)}}@-o-keyframes layer-rollIn{0%{opacity:0;-o-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-o-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}}@-webkit-keyframes hide-rollIn{0%{opacity:1;-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}100%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}}@keyframes hide-rollIn{0%{opacity:1;transform:translateX(0) rotate(0)}100%{opacity:0;transform:translateX(-100%) rotate(-120deg)}}@-moz-keyframes hide-rollIn{0%{opacity:1;-moz-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}100%{opacity:0;-moz-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}}@-ms-keyframes hide-rollIn{0%{opacity:1;-ms-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0);filter:Alpha(opacity=100)}100%{opacity:0;-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg);filter:Alpha(opacity=0)}}@-o-keyframes hide-rollIn{0%{opacity:1;-o-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}100%{opacity:0;-o-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}}@keyframes layer-fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes layer-fadeIn{0%{opacity:0}100%{opacity:1}}@-moz-keyframes layer-fadeIn{0%{opacity:0}100%{opacity:1}}@-o-keyframes layer-fadeIn{0%{opacity:0}100%{opacity:1}}@-ms-keyframes layer-fadeIn{0%{opacity:0;filter:Alpha(opacity=0)}100%{opacity:1;filter:Alpha(opacity=100)}}@keyframes hide-fadeIn{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes hide-fadeIn{0%{opacity:1}100%{opacity:0}}@-moz-keyframes hide-fadeIn{0%{opacity:1}100%{opacity:0}}@-o-keyframes hide-fadeIn{0%{opacity:1}100%{opacity:0}}@-ms-keyframes hide-fadeIn{0%{opacity:1}100%{opacity:0;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:0}}@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:0}}@-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:0}}@-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:0;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:0}}@keyframes layer-spread{0%{transform:scaleX(0);opacity:0}100%{transform:scaleX(1);opacity:1}}@-webkit-keyframes layer-spread{0%{-webkit-transform:scaleX(0);opacity:0}100%{-webkit-transform:scaleX(1);opacity:1}}@-moz-keyframes layer-spread{0%{-moz-transform:scaleX(0);opacity:0}100%{-moz-transform:scaleX(1);opacity:1}}@-o-keyframes layer-spread{0%{-o-transform:scaleX(0);opacity:0}100%{-o-transform:scaleX(1);opacity:1}}@-ms-keyframes layer-spread{0%{-ms-transform:scaleX(0);opacity:0;filter:Alpha(opacity=0)}100%{-ms-transform:scaleX(1);opacity:1;filter:Alpha(opacity=100)}}@keyframes hide-spread{0%{transform:scaleX(1)}50%{transform:scaleX(.5)}100%{transformX:scaleX(0%);opacity:0}}@-webkit-keyframes hide-spread{0%{-webkit-transform:scaleX(1)}50%{-webkit-transform:scaleX(.5)}100%{-webkit-transform:scaleX(0);opacity:0}}@-moz-keyframes hide-spread{0%{-moz-transform:scaleX(1)}50%{-moz-transform:scaleX(.5)}100%{-moz-transform:scaleX(0);opacity:0}}@-ms-keyframes hide-spread{0%{-ms-transform:scaleX(1)}50%{-ms-transform:scaleX(.5)}100%{-ms-transform:scaleX(0);opacity:0;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:999;position:fixed;background:#000;opacity:.4;top:0;height:100%;filter:alpha(opacity=50)}.msg-layer{z-index:9999;position:fixed;left:50%;top:50%;text-align:center;opacity:1;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:0;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">&times;</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
  • 相关阅读:
    基于摸板匹配的目標跟蹤算法
    spoj 2713 Can you answer these queries IV
    zoj 3633 Alice's present
    hdu 3642 Get The Treasury
    poj 1195 Mobile phones
    poj 2760 End of Windless Days
    zoj 3540 Adding New Machine
    spoj 1716 Can you answer these queries III
    spoj 1043 Can you answer these queries I
    spoj 2916 Can you answer these queries V
  • 原文地址：https://www.cnblogs.com/dongxiaolei/p/7235220.html
Copyright © 2011-2022 走看看