js模态框插件

最新推荐文章于 2024-03-15 09:33:54 发布

niuyongaiai

最新推荐文章于 2024-03-15 09:33:54 发布

阅读量1.4k

点赞数

代码效果：

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/模框/css/demo.css" rel="stylesheet" />    //需要的4个插件
    <link href="~/模框/css/iziModal.css" rel="stylesheet" />
    <script src="~/模框/js/jquery-2.1.1.min.js"></script>
    <script src="~/模框/js/iziModal.min.js"></script>
</head>
<body>
    <div style="text-align:center;margin-top:500px ">
        <input type="button" class="trigger-default" value="按钮"/>  

        <div id="modal-default" class="iziModal">
            <p>这是一个模态框!!!</p>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    $("#modal-default").iziModal({
        title: "这是标题栏",
        subtitle: "小标题",
        iconClass: 'icon-announcement',
        width: 500,
        padding: 20
    });
    $(document).on('click', '.trigger-default', function (event) {
        event.preventDefault();
        $('#modal-default').iziModal('open');
    });
</script>

demo.css插件代码

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:100,400,300,600,700);
html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
:focus { outline: 0;}
a:link, a:visited, a:active{text-decoration:none; color: #21b3b4}
table {	border-collapse: separate;border-spacing: 0; width: 100%;}
th, td {text-align: left; font-weight: normal;}
tr{line-height: 30px;}
img, iframe {border: none; text-decoration:none;}
ol, ul {list-style: none;}
input, textarea, select, button {font-size: 100%;font-family: inherit;}
object{display: block;}

img {
    vertical-align: middle;
}
fieldset, figure {
    border: 0;
    margin: 0;
    padding: 0;
}
textarea {
    resize: vertical;
}
strong{
    font-weight:bold;
}
em{
    font-style:italic;	
}
p{
    color:#333;	
}
*,
*:after,
*::before{box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}

body{
	font-family: arial;
    background: #F0F2F1;
    overflow-x:hidden;
}


.hide{
    display: none;
}

.in-block{
    display: inline-block;
}

.text-center{
    text-align: center;
}
.right{
    float: right
}

.highlight{
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.highlight::before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url("../img/bg.jpg") no-repeat 50% 50%;
    background-size: cover;
    opacity: 0.2;
}
.highlight::after{
    display: none;
    content: '';
    width: 31px;
    height: 236px;
    right: 31px;
    top: 50%;
    position: fixed;
    z-index: 9;
    background: rgba(0, 0, 0, 0.05);
    margin: -119px 0 0 0;
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.bg{
    background: #5f357d;
    min-height: 5px;
    background: radial-gradient(circle farthest-corner at right bottom,#ffd08a 0,#ffa376 28%,#D26565 52%,#5358A8 79%,#5A4C9F 100%);
    background-image: -webkit-radial-gradient(closest-corner,rgba(16,47,70,0) 60%,rgba(16,47,70,0.26)),-webkit-linear-gradient(108deg,#26d0ce,#1a2980 90%);
}
.highlight header{
    padding:25px 30px;
    position: relative;
    font-size: 0.9em;
}
.highlight header a{
    color: white;
}

.core{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -140px;
    text-align: center;
    font-family: 'Lato';
    color: white;
}
.core h3{
    font-size: 2em;
    font-weight: lighter;
    margin-bottom: 10px;
    padding: 10px;
    line-height: 1.1em;
    text-shadow: 0 12px 10px rgba(0, 0, 0, 0.24);
}
.core p{
    font-size: 1.1em;
    color: rgba(0, 0, 0, 0.4);
    padding: 0 20px;
    margin-bottom: 10px;
}
.core span{
    font-size: 0.3em;
    font-weight: 400;
    line-height: 1em;
}
.core .examples{
    color: white;
    text-transform: uppercase;
    font-size: 0.6em;
    font-weight: 400;
    letter-spacing: 0.2em;
    display: block;
    margin: 0 auto;
    width: 120px;
    padding: 4px 0 3px 3px;
    border-radius: 3px 3px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 0;
    position: relative;
}

.core a{
    display: block;
    border-radius: 3px;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
    transition: 0.2s ease;
    /*background: rgba(255,255,255,0.0);*/
    border: 0;
    font-size: 0.8em;
}
.core a:hover{
    /*background: rgba(255,255,255,0.1);*/
}



.core .buttons{
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 3px;
    padding: 5px;
    position: relative;
    z-index: 1;
    margin: 0 auto 20px;
    max-width: 280px;
    display: block;
}
.core .buttons li{
    text-align:center;
    white-space:nowrap;
}

.core .buttons .lava{
    display: none;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 50%;
    z-index: 3;
    margin: 0;
    border: 0;
    width: 0;
    padding: 0;
    overflow: hidden;
    text-indent: -9999em;
    background: rgba(255, 255, 255, 0.13);
    transition-property: left, width, opacity;
    transition-duration: .4s;
    transition-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
    pointer-events: none;
    opacity: 0;
}

.buttons li:nth-child(1):hover ~ li.lava { left: 5px; width: 84px; opacity: 1}
.buttons li:nth-child(2):hover ~ li.lava { left: 90px; width: 79px; opacity: 1}
.buttons li:nth-child(3):hover ~ li.lava { left: 170px; width: 85px; opacity: 1}
.buttons li:nth-child(4):hover ~ li.lava { left: 257px; width: 92px; opacity: 1}
.buttons li:nth-child(5):hover ~ li.lava { left: 350px; width: 103px; opacity: 1}
.buttons li:nth-child(6):hover ~ li.lava { left: 454px; width: 123px; opacity: 1}


.core .download{
    background: rgba(0, 0, 0, 0.1);
    display: block;
    margin: 0 auto;
    width: 180px;
    border-radius: 0 0 3px 3px;
    font-family: arial;
}
.core .download:hover{
    background: rgba(0, 0, 0, 0.2);
    width: 260px;
}


.notes{
  padding: 30px;
  margin: 30px 0 0 0;
  border: 1px solid #ddd;
  background: rgba(0,0,0,0.04);
}


.features{
    background: #fff;
    padding: 50px 0;
    margin-bottom: 50px;
}
.features ul{
    display: table;
    width: 100%;

}
.features ul li{
    display: inline-block;
    text-align: center;
    width: 33.3%;
    margin-bottom: 20px;
}
.features ul li .icon{
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
    font-size: 3em;
}
.features ul li:nth-child(1) .icon{color:#1E7A98;}
.features ul li:nth-child(2) .icon{color:#209CAA;}
.features ul li:nth-child(3) .icon{color:#21B3B4;}
.features ul li:nth-child(4) .icon{color:#23B8A5;}
.features ul li:nth-child(5) .icon{color:#24BCAF;}
.features ul li:nth-child(6) .icon{color:#28CAC4;}
.features ul li:nth-child(7) .icon{color:#28CA97;}

.wrap{
    max-width: 1020px;
    margin: 0 auto;
    padding: 0 20px;
}

.panel {
    min-height: 100px;
    background: #fff;
    margin: 50px auto;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.panel.attached-bottom{
    margin-bottom: 0;
    border-radius: 4px 4px 0 0;
}
main p{
    font-family: 'Lato';
    color: #80878c;
    line-height: 1.5em;
    font-size: 16px;
    font-weight: 300;
}
.panel p{
    padding: 10px 20px;
    font-size: 14px;
}
main h2{
    font-size: 2em;
    text-align: center;
    color: #aaa;
    font-family: 'Lato';
    font-weight: lighter;
}
main hr{
    border: 0;
    border-bottom: 1px solid #dbdcdb;
    margin: 10px 0;
    height: 1px;
}
main h3{
    padding: 10px 20px;
    background: #EDEDED;
    display: inline-block;
    margin: 10px 0 0 0;
    border-radius: 0 4px 4px 0;
    color: #777;
    font-family: 'Lato';
    font-size: 0.9em;
}


.modal{
    display: none;
    margin: 0 auto;
    background: url("../img/modal.png") no-repeat 50% 50%;
    background-size: contain;
    position: absolute;
    bottom: -120px;
    left: 0;
    right: 0;
    height: 300px;
    opacity: 0.3;
    transition: all 0.4s cubic-bezier(0.35, 0, 0.25, 1);
}
.modal:hover{
  transform: translateY(-50px);
  opacity: 0.7;
}



.scrollToTop{
    color: rgba(0, 0, 0, 0.3);
    left: 0;
    bottom: 0;
    position: fixed;
    font-size: 20px;
    padding: 20px 30px 20px 20px;
    cursor: pointer;
    transition: all 0.1s ease;
    transform: translateY(0);
}
.scrollToTop:hover{
    opacity: 0.5;
}
.scrollToTop:active{
    color: #555;
    transform: scale(1.4);
}







footer.main{
    margin-top: 50px;
    background: #fefefe;
    padding: 35px 20px;
    text-align: center;
    font-family: 'Lato';
    font-size: 0.9em;
}
footer.main p {
    color: #aeaeae;
    margin-bottom: 10px;
}
footer.main p a{
    color: #aeaeae;
}
footer.main p a:hover{
    text-decoration: underline;
}
footer.main p.assign{
    font-size: 11px;
}
footer ul li{
    display: inline-block;
    margin: 0 5px;
    color: #999;
}
footer ul li a{
    display: block;
    padding: 10px 0;
    margin-bottom: 20px;
}
footer ul li a:link, footer ul li a:visited, footer ul li a:active{
    color: #555;
}
footer ul li a:hover{
  	opacity: 0.7;
}




div.table{
    border: 1px solid #bbb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    background: white;
    margin: 0 0 50px 0;
    overflow-x: auto;
}
table {
    width: 100%;
    font-size: 14px;
    color: #8a8f94;
    text-align: left;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-family: 'Lato';
}
table th {
    background-color: #eee;
    padding: 9px 0;
    color: #aaa;
    text-align: center;
    position: relative;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #FFF;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
}
table td{
    padding: 10px 20px;
    vertical-align: top;
    font-size: 13px;
    line-height: 20px;
}
table td:nth-child(1) {
    font-weight: 600;
    color: #777
}
table tr{
    background: #fafafa;
}
table tr:nth-child(2n){
    background: #fff;
}
table td:nth-child(2) {
    font-style: italic;
    font-size: 14px;
}

.syntaxhighlighter{
    padding: 1px;
}
.syntaxhighlighter .toolbar{
    display: none;
}


.bloco-js .line:nth-child(1),
.bloco-js .line:nth-child(2),
.bloco-js .line:nth-child(4){
    opacity: 0.3;
}

#modal-iframe{
  border-bottom-color: black !important;
}

#modal-custom .iziModal-content header{
    background: #eee;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 3px 3px 0 0;
}
#modal-custom .iziModal-content header a{
    display: block;
    float: left;
    width: 50%;
    padding: 30px 25px 25px;
    text-align: center;
    background: #ddd;
    color: #999;
}
#modal-custom .iziModal-content header a.active{
    background: #fff;
    color: #777;
}
#modal-custom .iziModal-content section{
    padding: 30px;
}
#modal-custom .iziModal-content section input:not([type="checkbox"]), #modal-custom .iziModal-content section button{
    width: 100%;
    border-radius: 3px;
    border: 1px solid #ddd;
    margin-bottom: 26px;
    padding: 15px;
    font-size: 14px;
}
#modal-custom .iziModal-content section input:focus{
    border-color:#28CA97;
}
#modal-custom .iziModal-content section label[for="check"]{
    margin-bottom: 26px;
    font-size: 14px;
    color: #999;
    display: block;
}
#modal-custom .iziModal-content section footer{
    overflow: hidden;
}
#modal-custom .iziModal-content section button{
    background: #28CA97;
    color: white;
    margin: 0;
    border: 0;
    cursor: pointer;
    width: 50%;
    float: left;
}
#modal-custom .iziModal-content section button:hover{
    opacity: 0.8;
}
#modal-custom .iziModal-content section button:nth-child(1){
    border-radius: 3px 0 0 3px;
    background: #aaa;
}
#modal-custom .iziModal-content section button:nth-child(2){
    border-radius: 0 3px 3px 0;
}

#modal-custom .iziModal-content .icon-close{
    background: #FFF;
    margin-bottom: 10px;
    position: absolute;
    right: -8px;
    top: -8px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border: 0;
    color: #a9a9a9;
    cursor: pointer;
}
#modal-custom .iziModal-content .icon-close:hover, #modal-custom .iziModal-content .icon-close:focus{
  color: black;
}
.iziModal .iziModal-header-title{
  font-family: 'Lato', arial;
  font-weight: 500;
}









.cd-section{
    background: #F0F2F1;
}




/* No Touch devices */
.cd-nav-trigger {
  display: none;
}

.no-touch #cd-vertical-nav {
  position: fixed;
  right: 0;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 10;
  padding-right: 10px;
}
.no-touch #cd-vertical-nav li {
  text-align: right;
}
.no-touch #cd-vertical-nav a {
  display: inline-block;
  /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.no-touch #cd-vertical-nav a:after {
  content: "";
  display: table;
  clear: both;
}
.no-touch #cd-vertical-nav a span {
  float: right;
  display: inline-block;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -o-transform: scale(0.6);
  transform: scale(0.6);
}
.no-touch #cd-vertical-nav a:hover span {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.no-touch #cd-vertical-nav a:hover span.cd-dot{
    background: white;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.no-touch #cd-vertical-nav a:hover .cd-label {
  opacity: 1;
}
.no-touch #cd-vertical-nav a.is-selected .cd-dot {
    background-color: white;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    transform-origin: 50% 50%;
}
.no-touch #cd-vertical-nav .cd-dot {
    position: relative;
    /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/
    top: 8px;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    transition: transform 0.2s, background-color 0.2s;
    transform-origin: 50% 50%;
}
.no-touch #cd-vertical-nav .cd-label {
    position: relative;
    margin-right: 10px;
    padding: .3em .5em;
    font-size: 14px;
    font-size: 0.875rem;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    font-family: 'Lato';
    font-weight: 400;
    color: #555;
}
.cd-img-replace{
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}
.cd-nav-trigger{
  display: none;
}

/* Touch devices */
.touch .cd-nav-trigger {
  display: block;
  z-index: 10;
  position: fixed;
  bottom: 10px;
  right: 10px;
  height: 39px;
  width: 39px;
  border-radius: 0.25em;
  background: rgba(0, 0, 0, 0.4);
}
.touch .cd-nav-trigger span {
  position: absolute;
  height: 4px;
  width: 4px;
  background-color: #fff;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  background-color: inherit;
  border-radius: inherit;
}
.touch .cd-nav-trigger span::before {
  top: -9px;
}
.touch .cd-nav-trigger span::after {
  bottom: -9px;
}



.touch #cd-vertical-nav {
  position: fixed;
  z-index: 1;
  right: 10px;
  bottom: 10px;
  width: 90%;
  max-width: 378px;
  max-height: 90%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
  border-radius: 0.25em;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9;
}
.touch #cd-vertical-nav a {
  display: block;
  padding: 10px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #989898;
}
.touch #cd-vertical-nav a span:first-child {
  display: none;
}
.touch #cd-vertical-nav a.is-selected span:last-child {
  color: #fff;
}
.touch #cd-vertical-nav.open {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.touch #cd-vertical-nav.open + .cd-nav-trigger {
  background-color: transparent;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span {
  background-color: rgba(62, 57, 71, 0);
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
  background-color: #555;
  height: 3px;
  width: 20px;
  border-radius: 0;
  left: -8px;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 1px;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  bottom: 0;
}
.touch #cd-vertical-nav li:last-child a {
  border-bottom: none;
}

@media only screen and (min-width: 768px) {

  .core .buttons .lava{
    display: block;
  }

  .touch .cd-nav-trigger, .touch #cd-vertical-nav {
    bottom: 40px;
  }
  .no-touch #cd-vertical-nav {
    right: 40px;
    padding:0;
  }
  .highlight::after, .modal, .buttons .lava{
    display: block;
  }
  .core h1{
    font-size: 3em;
  }
  .core p{
    padding: 0;
    margin-bottom: 40px;
    font-weight: 400;
  }
  .scrollToTop{
    right: 0;
    left: auto;
    bottom: 0;
    color: #1F919B;
  }
  .core .buttons{
    max-width: none;
    display: inline-block;
  }
  .core .buttons li{
    display: inline-block;
    min-width: auto;
  }
  .features ul li{
    display: table-cell;
    text-align: center;
    width: 16%;
  }
  footer ul li a{
    padding: 10px;
  }

}



.no-touch .first-section #cd-vertical-nav .cd-label{
    color: #fff;
}

@-webkit-keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}




@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

iziModal.css插件代码

.iziModal {
    display: none;
    position: fixed;
    width: 100%;
    left: 50%;
    top: 50%;
    z-index:999;
    background: #FFF;
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    transition: margin-top 0.3s ease;
}
.iziModal *{
    -webkit-font-smoothing: antialiased;
}
.iziModal::after{
    content: '';
    width: 100%;
    height: 0px;
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.35)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%);
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%);
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#59000000',GradientType=0 );
    transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    pointer-events: none;
}
.iziModal.hasScroll::after{
    height: 50px;
    opacity: 1;
}
.iziModal .iziModal-button-close{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    outline: none;
    height: 46px;
    width: 46px;
    border-radius: 50%;
    opacity: 0.5;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA1Q0VDOEExRkE2QjExRTRBMTRGRjEzNTI3QzQxNjgzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA1Q0VDOEEyRkE2QjExRTRBMTRGRjEzNTI3QzQxNjgzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDVDRUM4OUZGQTZCMTFFNEExNEZGMTM1MjdDNDE2ODMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDVDRUM4QTBGQTZCMTFFNEExNEZGMTM1MjdDNDE2ODMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42M6umAAAA+klEQVR42ryWMQ6CMBSGwbgw6szg0CuwcQGP4A1IWFzxQh6AwTuwsjpZd1iZnj/JC6nkQVFo/+Rb2vL/tH20hEQUuNTe0n8AF3AGCsTc/gZP8AB30Ew69DMQiMANNGRXw2MjyUsyP4GaflfNz84GxEDT/9LsIQb0U6xovSpzuXbGdlxBskHhJOz1tclH0Apvk4F0Ytk092VCX8ueQ0A+Md2U+9UoRHNbwGMk5WZAObNpahQitUkqzYCXpTJMwyXmxJ5DQLeg/JRRcWpBOXfjKnIjX0vkfJOdl6nzD62noO1UeDvsvB7XXi6cza/M0PJXsfrStwWs1keAAQCDFDiZcdu3BwAAAABJRU5ErkJggg==') no-repeat 50% 50%;
    transition: transform 0.5s cubic-bezier(.16,.81,.32,1), opacity 0.5s ease;
}
.iziModal .iziModal-button-close:hover{
    opacity: 1;
    transform: rotate(180deg);
}
.iziModal .iziModal-header {
    background: #88A0B9;
    padding: 14px 40px 15px 18px;
    border-radius: 3px 3px 0 0;
    box-shadow: inset 0 -10px 15px -12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: relative;
    z-index: 10;
}
.iziModal .iziModal-header-icon{
    font-size: 40px;
    color: rgba(255, 255, 255, 0.5);
    padding-right: 15px;
    float: left;
}
.iziModal .iziModal-header-title {
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}
.iziModal .iziModal-header-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    line-height: 1.4;
}
.iziModal .iziModal-header-title, .iziModal .iziModal-header-subtitle{
    margin: 0;
    font-family: Arial;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .iziModal .iziModal-header.iziModal-noSubtitle{
        height: auto;
        padding: 10px 40px 12px 15px;
    }
    .iziModal .iziModal-header.iziModal-noSubtitle .iziModal-header-icon{
        font-size: 23px;
        padding-right: 13px;
    }
    .iziModal .iziModal-header.iziModal-noSubtitle .iziModal-header-title{
        font-size: 15px;
        margin: 3px 0 0 0;
        font-weight: 400;
    }

    /* LIGHT THEME */
    .iziModal.light .iziModal-header{
        box-shadow: none;
    }
    .iziModal.light .iziModal-header-icon{
        color: rgba(0, 0, 0, 0.5);
    }
    .iziModal.light .iziModal-header-title{
        color: #000;
    }
    .iziModal.light .iziModal-header-subtitle{
        color: rgba(0, 0, 0, 0.6);
    }
    .iziModal.light .iziModal-button-close{
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDU0QjI2RjgyNjZFMTFFNkE3RTk5MEFGMzVBNTcxNkYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDU0QjI2RjcyNjZFMTFFNkE3RTk5MEFGMzVBNTcxNkYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDVDRUM4QTFGQTZCMTFFNEExNEZGMTM1MjdDNDE2ODMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDVDRUM4QTJGQTZCMTFFNEExNEZGMTM1MjdDNDE2ODMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6mca+RAAABkklEQVR42rxVoU4DQRC9NhhUAYNBICqbVLUJSU+cK4IPuB+4BAeCNAUPAgH6fqCuBkHdGRJEVZPKE4iaKlqFPN4ms8uymbm7hjsmeZmmO/ve7czsTiPLMq9O28tbjOP4EC4EzoE2cEJLKyAFXoFJFEWfEkeDOwGI9+GugRvgoOAjN8Aj8AShr0IBkJ/CvQCdHbOxBC4g8iEKgFyl4N1Kxa6mUncGkZX+o+mkZfoHco/2TonrtwDsCuhV0Dg94voRgOIR3IgJvgR8OjqXDp9iXBsRpzmBasUWVzjk8w0+cETU74DWlsy+FnEagaFw3Am+pA2i1BLR5KlaUzHC3qEt0M0pWuKI2ORJTlN07Zt8XNAZSiQgEa8EueFsejWbFlgXXB6TFqYmkq1tgUUZckpLUlJkYQvMhKCQKahb+FDYO7MFVKttmaAOiAZMQbXIQHgUt7p9zWOH4DHcfUW1vcXpHtwuegbmFZDPieufn2tltOAL70uZgePb5OxFo4nUB+5oHBbZhmL77jQTZ3LtQ79K+xZgAC6hutw74AdUAAAAAElFTkSuQmCC') no-repeat 50% 50%;
    }


.iziModal .iziModal-loader{
    background: #FFF url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0NCA0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM5OTkiPiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS13aWR0aD0iMiI+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iLTAuOXMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49Ii0wLjlzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9;
}

.iziModal .iziModal-content-loader{
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0NCA0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM5OTkiPiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS13aWR0aD0iMiI+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iLTAuOXMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49Ii0wLjlzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%;
}

.iziModal .iziModal-content:before,
.iziModal .iziModal-content:after { content:''; display:table }
.iziModal .iziModal-content:after { clear:both }
.iziModal .iziModal-content{ zoom:1 }
.iziModal .iziModal-wrap{
    position: relative;
    transition: height 0.3s ease;
}
.iziModal .iziModal-iframe{
    width: 100%;
    margin-bottom: -4px;
    transition: height 0.3s ease;
}
.iziModal-overlay{
    display: block;
    position: fixed;
    /*background: rgba(0, 0, 0, 0.4);*/
    z-index: 998;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

body.iziModal-attached{
    overflow: hidden;
}
body.iziModal-attached .iziModal{
    border-radius: 0;
}
body.iziModal-attached .iziModal-header{
    border-radius: 0;       
}
body.iziModal-attached .iziModal-wrap{
    overflow-y: auto;
    overflow-x: hidden;
}

/**
 * ANIMATIONS
 */

.iziModal.transitionIn .iziModal-header{
    -webkit-animation: slideDown 0.7s cubic-bezier(0.7,0,0.3,1); /* both */
    -moz-animation: slideDown 0.7s cubic-bezier(0.7,0,0.3,1); /* both */
    animation: slideDown 0.7s cubic-bezier(0.7,0,0.3,1); /* both */
}
    .iziModal.transitionIn .iziModal-header .iziModal-header-icon {
        -webkit-animation: revealIn 1s cubic-bezier(.16,.81,.32,1) both;
        -moz-animation: revealIn 1s cubic-bezier(.16,.81,.32,1) both;
        animation: revealIn 1s cubic-bezier(.16,.81,.32,1) both;
    }
    .iziModal.transitionIn .iziModal-header .iziModal-header-title, .iziModal.transitionIn .iziModal-header .iziModal-header-subtitle {
        -webkit-animation: slideIn 1s cubic-bezier(.16,.81,.32,1) both;
        -moz-animation: slideIn 1s cubic-bezier(.16,.81,.32,1) both;
        animation: slideIn 1s cubic-bezier(.16,.81,.32,1) both;
    }

    .iziModal.transitionIn .iziModal-header .iziModal-button-close{
        -webkit-animation: revealIn 1.2s cubic-bezier(0.7,0,0.3,1);
        -moz-animation: revealIn 1.2s cubic-bezier(0.7,0,0.3,1);
        animation: revealIn 1.2s cubic-bezier(0.7,0,0.3,1);
    }

.iziModal.transitionIn .iziModal-iframe, .iziModal.transitionIn .iziModal-wrap{
    -webkit-animation: fadeIn 2s;
    -moz-animation: fadeIn 2s;
    animation: fadeIn 2s;
}
.iziModal.transitionIn .iziModal-header {
    -webkit-animation-delay: 0.0s;
    -moz-animation: 0.0s;
    animation-delay: 0.0s;
}
.iziModal.transitionIn .iziModal-header .iziModal-header-icon,
.iziModal.transitionIn .iziModal-header .iziModal-header-title {
    -webkit-animation-delay: 0.4s;
    -moz-animation: 0.4s;
    animation-delay: 0.4s;
}
.iziModal.transitionIn .iziModal-header .iziModal-header-subtitle {
    -webkit-animation-delay: 0.5s;
    -moz-animation: 0.5s;
    animation-delay: 0.5s;
}
.fadeOut {
    -webkit-animation: fadeOut 0.5s;
    -moz-animation: fadeOut 0.5s;
    animation: fadeOut 0.5s;
}
.fadeIn {
    -webkit-animation: fadeIn 0.5s;
    -moz-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
}
.transitionIn{
    -webkit-animation: transitionIn 0.5s ease;
    -moz-animation: transitionIn 0.5s ease;
    animation: transitionIn 0.5s ease;
}
.transitionOut{
    -webkit-animation: transitionOut 0.5s cubic-bezier(.16,.81,.32,1);
    -moz-animation: transitionOut 0.5s cubic-bezier(.16,.81,.32,1);
    animation: transitionOut 0.5s cubic-bezier(.16,.81,.32,1);
}

@-webkit-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@-moz-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-moz-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-webkit-keyframes slideIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes slideIn {
    0% {
        opacity: 0;
        -moz-transform: translateX(50px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes transitionIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(-20px) perspective( 600px ) rotateX( 10deg );
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0) perspective( 600px ) rotateX( 0 ); 
    }
}
@-moz-keyframes transitionIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(-20px) perspective( 600px ) rotateX( 10deg );
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0) perspective( 600px ) rotateX( 0 ); 
    }
}
@keyframes transitionIn {
    0% {
        opacity: 0;
        /*transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );*/
        transform: scale(0.9) translateY(-20px) perspective( 600px ) rotateX( 10deg );
    }
    100% {
        opacity: 1;
        /*transform: scale(1) translateY(0) perspective( 600px ) rotateX( 0 ); */
        transform: scale(1) translateY(0) perspective( 600px ) rotateX( 0 ); 
    }
}

@-webkit-keyframes transitionOut {
    0% {
        opacity: 1;
        transform: scale(1); 
    }
    100% {
        opacity: 0;
        transform: scale(0.9); 
    }
}
@-moz-keyframes transitionOut {
    0% {
        opacity: 1;
        transform: scale(1); 
    }
    100% {
        opacity: 0;
        transform: scale(0.9); 
    }
}
@keyframes transitionOut {
    0% {
        opacity: 1;
        /*transform: translateY(0) perspective( 600px ) rotateX( 0 ); */
        transform: scale(1); 
    }
    100% {
        opacity: 0;
        /*transform: translateY(10px) perspective( 600px ) rotateX( 10deg ); */
        transform: scale(0.9); 
    }
}

@-webkit-keyframes slideDown {
    0% { opacity: 0; -webkit-transform: scale(1,0) translateY(-40px); -webkit-transform-origin: center top; }
}
@-moz-keyframes slideDown {
    0% { opacity: 0; -moz-transform: scale(1,0) translateY(-40px); -moz-transform-origin: center top; }
}
@keyframes slideDown {
    0% { opacity: 0; transform: scale(1,0) translateY(-40px); transform-origin: center top; }
}


@-webkit-keyframes revealIn {
    0% { opacity: 0; -webkit-transform: scale3d(0.3,0.3,1); }
}
@-moz-keyframes revealIn {
    0% { opacity: 0; -moz-transform: scale3d(0.3,0.3,1); }
}
@keyframes revealIn {
    0% { opacity: 0; transform: scale3d(0.3,0.3,1); }
}

/**
 * SCROLL
 */

.iziModal ::-webkit-scrollbar {
    overflow: visible;
    height: 7px;
    width: 7px;
}
.iziModal ::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
}
.iziModal ::-webkit-scrollbar-thumb:active {
    background-color: rgba(0,0,0,.4);
}
.iziModal ::-webkit-scrollbar-button {
    height: 0;
    width: 0;
}
.iziModal ::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 2px;
}

iziModal.min.js插件代码

(function(e){"use strict";function t(){var e,t=document.createElement("fakeelement"),i={animation:"animationend",OAnimation:"oAnimationEnd",MozAnimation:"animationend",WebkitAnimation:"webkitAnimationEnd"};for(e in i)if(void 0!==t.style[e])return i[e]}var i="iziModal",n={CLOSING:"closing",CLOSED:"closed",OPENING:"opening",OPENED:"opened",DESTROYED:"destroyed"},s=t(),o=!1;/Mobi/.test(navigator.userAgent)&&(o=!0);var a=function(e,t){this.init(e,t)};a.prototype={constructor:a,init:function(t,s){var o=this;this.$element=e(t),this.id=this.$element.attr("id"),this.state=n.CLOSED,this.options=s,this.timer=null,this.headerHeight=0,this.$header=e('<div class="'+i+'-header"><h2 class="'+i+'-header-title">'+s.title+'</h2><p class="'+i+'-header-subtitle">'+s.subtitle+'</p><a href="javascript:void(0)" class="'+i+'-button-close" data-'+i+"-close></a></div>"),this.$overlay=e('<div class="'+i+'-overlay" style="background-color:'+s.overlayColor+'"></div>'),""===s.subtitle&&this.$header.addClass(i+"-noSubtitle"),s.iframe===!0?(this.$element.html('<div class="'+i+'-wrap"><div class="'+i+"-content "+i+'-content-loader"><iframe class="'+i+'-iframe"></iframe>'+this.$element.html()+"</div></div>"),null!==s.iframeHeight&&this.$element.find("."+i+"-iframe").css("height",s.iframeHeight)):this.$element.html('<div class="'+i+'-wrap"><div class="'+i+'-content">'+this.$element.html()+"</div></div>"),e(document.body).find("style[rel="+this.id+"]").remove(),"undefined"==typeof s.padding&&0===s.padding||this.$element.find("."+i+"-content").css("padding",s.padding),""===s.title&&""===s.subtitle||(null!==s.headerColor&&(this.$element.css("border-bottom","3px solid "+s.headerColor),this.$header.css("background",this.options.headerColor)),null!==s.iconClass&&(this.$header.prepend('<i class="'+i+"-header-icon "+s.iconClass+'"></i>'),this.$header.find("."+i+"-header-icon").css("color",s.iconColor)),this.$element.prepend(this.$header));var a=/%|px|em|cm/,l=String(s.width).split(a),r=String(s.width),h="px";l=String(l).split(",")[0],isNaN(s.width)&&(h=-1!=String(s.width).indexOf("%")?"%":r.slice("-2")),this.$element.css({"margin-left":-(l/2)+h,"max-width":parseInt(l)+h}),this.mediaQueries='<style rel="'+this.id+'">@media handheld, only screen and (max-width: '+l+"px) { #"+this.$element[0].id+"{ width: 100% !important; max-width: 100% !important; margin-left: 0 !important; left: 0 !important; } }</style>",e(document.body).append(this.mediaQueries),this.$element.addClass(i+" "+s.theme),this.$element.css("margin-top",parseInt(-(this.$element.innerHeight()/2))+"px"),this.$element.find("."+i+"-header").length&&this.$element.css("overflow","hidden"),this.$overlay.click(function(){o.options.overlayClose&&!o.$element.hasClass(o.options.transitionOutModal)&&o.close()}),this.$element.on("click","[data-"+i+"-close]",function(e){e.preventDefault(),o.close()})},toggle:function(){this.state==n.OPENED&&this.close(),this.state==n.CLOSED&&this.open()},open:function(t){function a(){l.$element.trigger(n.OPENED),l.state=n.OPENED,console.info("[ "+i+" | "+l.id+" ] Opened."),l.options.onOpened.call(this)}var l=this;if(t&&"function"==typeof t&&t(l),this.options.iframe===!0){var r=null;if(null!==this.options.iframeURL)r=this.options.iframeURL;else try{r=t.target.href,void 0!==r&&(r=t.target.href)}catch(h){console.warn(h)}this.$element.find("."+i+"-iframe").attr("src",r)}this.$element.trigger(n.OPENING),this.state=n.OPENING,console.info("[ "+i+" | "+this.id+" ] Opening..."),(this.options.bodyOverflow||o)&&e(document.body).css("overflow","hidden"),l.options.onOpening.call(this),this.$overlay.appendTo("body"),this.options.transitionInOverlay&&this.$overlay.addClass(this.options.transitionInOverlay),""!==this.options.transitionInModal?(this.$element.addClass(this.options.transitionInModal).show(),this.$element.find("."+i+"-wrap").one(s,function(){l.$element.removeClass(l.options.transitionInModal),l.$overlay.removeClass(l.options.transitionInOverlay),a()})):(this.$element.show(),a()),l.options.focusInput&&l.$element.find(":input:not(button):enabled:visible:first").focus(),function d(){l.recalculateLayout(),l.timer=setTimeout(d,500)}(),e(document).keydown(function(e){l.options.closeOnEscape&&27===e.keyCode&&l.close()})},close:function(t){function a(){l.options.iframe===!0&&l.$element.find("."+i+"-iframe").attr("src",""),(l.options.bodyOverflow||o)&&e(document.body).css("overflow","initial"),e(document.body).removeClass(i+"-attached"),l.$element.trigger(n.CLOSED),l.state=n.CLOSED,console.info("[ "+i+" | "+l.id+" ] Closed."),l.options.onClosed.call(this)}var l=this;t&&"function"==typeof t&&t(l),e(document).off("keydown"),this.state=n.CLOSING,this.$element.trigger(n.CLOSING),console.info("[ "+i+" | "+this.id+" ] Closing..."),clearTimeout(l.timer),l.options.onClosing.call(this),""!==this.options.transitionOutModal?(this.$element.attr("class",i+" "+this.options.theme+" "+this.options.transitionOutModal),this.$overlay.attr("class",i+"-overlay "+this.options.transitionOutOverlay),this.$element.one(s,function(){l.$element.hasClass(l.options.transitionOutModal)&&(l.$element.removeClass(l.options.transitionOutModal).hide(),l.$overlay.removeClass(l.options.transitionOutOverlay).remove(),a())})):(this.$element.hide(),this.$overlay.remove(),a())},destroy:function(){var t=e.Event("destroy");this.$element.trigger(t),e(document).off("keydown"),clearTimeout(this.timer),this.options.iframe===!0&&this.$element.find("."+i+"-iframe").remove(),this.$element.html(this.$element.find("."+i+"-content").html()),e(document.body).find("style[rel="+this.id+"]").remove(),this.$element.off("click","[data-"+i+"-close]"),this.$element.off("."+i).removeData(i).attr("style",""),this.$overlay.remove(),this.$element.trigger(n.DESTROYED),this.$element=null},getState:function(){return console.info(this.state),this.state},setTitle:function(e){null!==this.options.title&&(this.$header.find("."+i+"-header-title").html(e),this.options.title=e)},setSubtitle:function(e){null!==this.options.subtitle&&(this.$header.find("."+i+"-header-subtitle").html(e),this.options.subtitle=e)},setIconClass:function(e){null!==this.options.iconClass&&(this.$header.find("."+i+"-header-icon").attr("class",i+"-header-icon "+e),this.options.iconClass=e)},setHeaderColor:function(e){null!==this.options.headerColor&&(this.$element.css("border-bottom","3px solid "+e),this.$header.css("background",e),this.options.headerColor=e)},startLoading:function(){this.$element.find("."+i+"-loader").length||this.$element.append('<div class="'+i+"-loader "+this.options.transitionInOverlay+'"></div>')},stopLoading:function(){var e=this;this.$element.find("."+i+"-loader").removeClass(this.options.transitionInOverlay).addClass(this.options.transitionOutOverlay),this.$element.find("."+i+"-loader").one(s,function(){e.$element.find("."+i+"-loader").removeClass(e.options.transitionOutOverlay).remove()})},recalculateLayout:function(){this.$element.find("."+i+"-header").length&&(this.headerHeight=parseInt(this.$element.find("."+i+"-header").innerHeight())+2,this.$element.css("overflow","hidden"));var t=e(window).height(),s=this.$element.find("."+i+"-content")[0].scrollHeight,o=parseInt(-((this.$element.innerHeight()+1)/2))+"px";if(this.state==n.OPENED||this.state==n.OPENING)if(this.options.iframe===!0)t<this.options.iframeHeight+this.headerHeight?(e(document.body).addClass(i+"-attached"),this.$element.find("."+i+"-iframe").css({height:parseInt(t-this.headerHeight)+"px"})):(e(document.body).removeClass(i+"-attached"),this.$element.find("."+i+"-iframe").css({height:parseInt(this.options.iframeHeight)+"px"}));else{t>s+this.headerHeight&&(e(document.body).removeClass(i+"-attached"),this.$element.find("."+i+"-wrap").css({height:"auto"})),(this.$element.innerHeight()>t||this.$element.innerHeight()<s)&&(e(document.body).addClass(i+"-attached"),this.$element.find("."+i+"-wrap").css({height:parseInt(t-this.headerHeight)+"px"}));var a=this.$element.find("."+i+"-wrap").scrollTop(),l=this.$element.find("."+i+"-content").innerHeight(),r=this.$element.find("."+i+"-wrap").innerHeight();l-50>r+a?this.$element.addClass("hasScroll"):this.$element.removeClass("hasScroll")}this.$element.css("margin-top")!=o&&"0px"!=this.$element.css("margin-top")&&this.$element.css("margin-top",o)}},e.fn[i]=function(t,n){return this.each(function(){var s=e(this),o=s.data(i),l=e.extend({},e.fn.iziModal.defaults,s.data(),"object"==typeof t&&t);o||t&&"object"!=typeof t||s.data(i,o=new a(this,l)),"string"==typeof t&&"undefined"!=typeof o?o[t].apply(o,[].concat(n)):l.autoOpen&&o.open()})},e.fn[i].defaults={title:"",subtitle:"",theme:"",headerColor:"#88A0B9",overlayColor:"rgba(0, 0, 0, 0.4)",iconColor:"",iconClass:null,width:600,padding:0,iframe:!1,iframeHeight:400,iframeURL:null,overlayClose:!0,closeOnEscape:!0,bodyOverflow:!1,focusInput:!0,autoOpen:!1,transitionInModal:"transitionIn",transitionOutModal:"transitionOut",transitionInOverlay:"fadeIn",transitionOutOverlay:"fadeOut",onOpening:function(){},onOpened:function(){},onClosing:function(){},onClosed:function(){}},e.fn[i].Constructor=a}).call(this,window.jQuery);

jquery-2.1.1.min.js这个插件用咋们vs创建项目自带的就可以