<!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">&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

最新文章

  1. Ajax文件上传
  2. 数组操作splice
  3. 获取iTextSharp 的image 报错
  4. 关系型数据库ACID
  5. CEF3开发者系列之类和接口
  6. quartz-2.2.x 快速入门 （1）
  7. css清除默认样式和设置公共样式
  8. VSFTP被动模式
  9. bzoj4096 [Usaco2013 dec]Milk Scheduling
  10. ADO.net基础学习总结（二）
  11. 五指cms模版基础
  12. React-Native 之 项目实战(三)
  13. 如何使用 Weave 网络？- 每天5分钟玩转 Docker 容器技术（63）
  14. 【技巧】EasyUI分页组件pagination显示项控制
  15. RESTful架构详解
  16. 039、Data Volume 之 bind mount （2019-02-28 周四）
  17. 转载 JavaScript的函数声明与函数表达式的区别
  18. 令新手头疼的modelsim库编译
  19. 数据库入门4 结构化查询语言SQL
  20. PHP核心技术——魔术方法

热门文章

  1. SQL基本操作（工作中够用了）
  2. Git——新手入门与上传项目到远程仓库GitHub
  3. TextBox 控件
  4. 详解js闭包
  5. 怎么使用fiddler 测试post get 接口
  6. 在ASP.NET中过滤HTML字符串总结
  7. 安装vmware player
  8. 【原】Spring和Dubbo基于XML配置整合过程
  9. mybatis必知必会一
  10. 图解 CMS 垃圾回收机制，你值得拥有（转 强烈推荐）