html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td{margin:0;padding:0;}
body{
font-family: 'Microsoft YaHei';
}
.alert-modal{
left:0;
top:0;
width:100%;
height:100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
}
.alert-container{
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
background: #fff;
border:1px solid #f1f1f1;
z-index: 999999;
overflow: hidden;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.alert-title{
font-size: 16px;
text-align: center;
line-height: 42px;
color:#111;
background: #fff;
position: absolute;
left:0;
top:0;
z-index: 9999;
width:100%;
text-align: center;
}
.alert-content{
font-size: 14px;
padding:15px 20px;
color:#555;
height:100%;
overflow: auto;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.alert-content-scrollbar{
}
.alert-btn-box{
border-top:1px solid #f1f1f1;
text-align: right;
position: absolute;
left:0;
background: #fff;
bottom: 0;
z-index: 9999;
width:100%;
}
.alert-btn-p{
display: inline-block;
text-align: center;
border-right:1px solid #f1f1f1;
background-color: #fff;
font-size:14px;
line-height: 35px;
cursor: pointer;
color:#222;
box-sizing: border-box;
}
.alert-btn-p:hover{
background: #eee;
}
.alert-btn-p:last-child{
border-right: none;
}
.pcAlert .alert-btn-box{
padding-right:10px;
border:none;
}
.pcAlert .alert-btn-p{
border:1px solid #f1f1f1;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
line-height: 30px;
margin:7px 0;
padding:0 10px;
margin-right:10px;
}
.alert-btn-close{
position: absolute;
right:10px;
top:3px;
font-size: 24px;
cursor: pointer;
z-index: 10000;
}
.alert-container-black{
background-color:rgba(0,0,0,0.65);
border:none;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
}
.alert-container-black .alert-content{
color: #fff;
}
.linearTop{
-webkit-animation-name: linearTop;
-moz-animation-name: linearTop;
-o-animation-name: linearTop;
animation-name: linearTop;
}
.linearBottom{
-webkit-animation-name: linearBottom;
-moz-animation-name: linearBottom;
-o-animation-name: linearBottom;
animation-name: linearBottom;
}
/*alert-actionsheet*/
.alert-actionsheet{
border-radius: 0;
background-color: #ddd;
}
.alert-actionsheet .alert-content{
display: none;
}
.none{
display: none;
}
.alert-actionsheet .alert-title{
color: #aaa;
line-height: 50px;
}
.alert-actionsheet .alert-title,.alert-actionsheet .alert-btn-box{
position: static;
}
.alert-actionsheet .alert-btn-p{
font-size: 16px;
display: block;
line-height: 40px;
border-bottom: 1px solid #eee;
}
.alert-actionsheet .alert-btn-box{
background-color: transparent;
}
.alert-actionsheet .alert-btn-sheet{
margin-top:5px;
}
@keyframes linearBottom {
0%{
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
opacity: 1;
filter:alpha(opacity=100);
}
100%{
-webkit-transform: translate3d(0,80px,0);
-moz-transform: translate3d(0,80px,0);
-o-transform: translate3d(0,80px,0);
transform: translate3d(0,80px,0);
opacity: 0;
filter:alpha(opacity=0);
}
}
@keyframes linearTop {
0%{
-webkit-transform: translate3d(0,80px,0);
-moz-transform: translate3d(0,80px,0);
-o-transform: translate3d(0,80px,0);
transform: translate3d(0,80px,0);
opacity: 0;
filter:alpha(opacity=0);
}
100%{
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
opacity: 1;
filter:alpha(opacity=100);
}
}
/*显示动画*/
.animated.infinite {
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
.animated.linearBottom,
.animated.linearTop,
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .45s;
-moz-animation-duration: .45s;
-o-animation-duration: .45s;
animation-duration: .45s;
}
@keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-o-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
filter:alpha(opacity=0);
-webkit-transform: scale3d(.3, .3, .3);
-moz-transform: scale3d(.3, .3, .3);
-o-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale3d(1, 1, 1);
-moz-transform: scale3d(1, 1, 1);
-o-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}
@keyframes bounceOut {
20% {
-webkit-transform: scale3d(1.2, 1.2, 1.2);
-moz-transform: scale3d(1.2, 1.2, 1.2);
-o-transform: scale3d(1.2, 1.2, 1.2);
transform: scale3d(1.2, 1.2, 1.2);
}
65%, 70% {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale3d(.75, .75, .75);
-moz-transform: scale3d(.75, .75, .75);
-o-transform: scale3d(.75, .75, .75);
transform: scale3d(.75, .75, .75);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale3d(.3, .3, .3);
-moz-transform: scale3d(.3, .3, .3);
-o-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
}
.bounceOut {
-webkit-animation-name: bounceOut;
-moz-animation-name: bounceOut;
-o-animation-name: bounceOut;
animation-name: bounceOut;
}