*{ margin:0; padding:0; } body{ font-family: "微软雅黑" } .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: 99999; 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: 999; 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: 999; width:100%; } .alert-btn-box p{ padding: 0 !important; margin: 0 !important; } .alert-btn-p{ display: inline-block; text-align: center; border-right:1px solid #f1f1f1; 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: 1000; } .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; } @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; }