css高级弹窗效果:
html:
<div class=”popup-box”>
<div class=”demo”>
<a href=”javascript:;” class=”bounceIn”><span>活动规则</span</a>
</div>
<div id=”dialogBg”></div>
<div id=”dialog” class=”animated”>
<img class=”dialogIco” width=”50″ height=”50″ src=”images/notify.png” alt=”” />
<div class=”dialogTop”>
<a href=”javascript:;” class=”claseDialogBtn”>关闭</a>
</div>
<div>
<p class=’dialogContent’><br>活动说明
</p>
</div>
</div>
</div>
css:
/* 弹窗效果 */
@CHARSET “UTF-8”;
body{
font:.85em/1.4 “微软雅黑”,”Microsoft Yahei”,’Arial’,’san-serif’;
color:#666;
margin:0;
padding:0
}
img{
max-width:100%;
height:auto;
width:auto9;
-ms-interpolation-mode:bicubic;
vertical-align:middle
}
a,button,input{
-webkit-tap-highlight-color:rgba(255,0,0,0)
}
input{
border:0 none;
-webkit-appearance:none
}
ul,p{
padding:0;
margin:0
}
h1,h2,h3,h4,h5,h6{
margin:0;
font-weight:100
}
ul,li{
list-style:none
}
a{
color:#666
}
a,a:hover{
text-decoration:none
}
a:focus{
outline:none
}
.animated{
-webkit-animation-duration:1.4s;
animation-duration:1.4s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
}
@-webkit-keyframes bounceIn{
0%{
opacity:0;
-webkit-transform:scale(.3);
transform:scale(.3)
}
50%{
opacity:1;
-webkit-transform:scale(1.05);
transform:scale(1.05)
}
70%{
-webkit-transform:scale(.9);
transform:scale(.9)
}
100%{
opacity:1;
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes bounceIn{
0%{
opacity:0;
-webkit-transform:scale(.3);
-ms-transform:scale(.3);
transform:scale(.3)
}
50%{
opacity:1;
-webkit-transform:scale(1.05);
-ms-transform:scale(1.05);
transform:scale(1.05)
}
70%{
-webkit-transform:scale(.9);
-ms-transform:scale(.9);
transform:scale(.9)
}
100%{
opacity:1;
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1)
}
}
.bounceIn{
-webkit-animation-name:bounceIn;
animation-name:bounceIn
}
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-120deg);
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
}
@keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-120deg);
-ms-transform: translateX(-100%) rotate(-120deg);
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
-ms-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
-ms-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
/*——————- 华丽分割线 ———————–*/
header{width:90%;text-align:center;padding:5%;letter-spacing:2px;color:#333;font-size:1.2em;text-shadow:0 0 2px #999;}
.demo{width:100%;margin:0 auto;text-align:center;}
.demo a{margin:0 5px 20px;background-color:#eee;}
/*——————- 华丽分割线 ———————–*/
.popup-box{padding:10px 0 20px 0;}
#dialogBg{width:100%;height:100%;background-color:#000000;opacity:.6;filter:alpha(opacity=60);position:fixed;top:0;left:0;z-index:9999;display:none;}
#dialog{width:80%;height:50%;margin:0 auto;display:none;background-color:#ffffff;position:fixed;top:20%;left:10%;z-index:10000;border:1px solid #ccc;border-radius:10px;-webkit-border-radius:10px;box-shadow:3px 2px 4px #ccc;-webkit-box-shadow:3px 2px 4px #ccc;}
.dialogTop{width:90%;margin:0 auto;border-bottom:1px dotted #ccc;letter-spacing:1px;padding:10px 0;text-align:right;}
.dialogIco{width:50px;height:50px;position:absolute;top:-25px;left:50%;margin-left:-25px;}
.dialogContent{font-size:12px;text-align:left;white-space:normal;overflow-x:hidden;overflow-y:scroll;width:96%;height:80%;left:2%;position:absolute;}
.editInfos{padding:15px 0;}
.editInfos li{width:90%;margin:8px auto auto;text-align: center;}
.ipt{border:1px solid #ccc;padding:5px;border-radius:3px;-webkit-border-radius:3px;box-shadow:0 0 3px #ccc inset;-webkit-box-shadow:0 0 3px #ccc inset;margin-left:5px;}
.ipt:focus{outline:none;border-color:#66afe9;box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);}
.submitBtn{width:90px;height:30px;line-height:30px;font-family:”微软雅黑”,”microsoft yahei”;cursor:pointer;margin-top:10px;display:inline-block;border-radius:5px;-webkit-border-radius:5px;text-align:center;background-color:#428bca;color:#fff;box-shadow: 0 -3px 0 #2a6496 inset;-webkit-box-shadow: 0 -3px 0 #2a6496 inset;}
.demo span{text-decoration:underline;color:red;font-size:20px;font-size:bold;}
js:
/*弹窗效果js插件*/
var w,h,className;
function getSrceenWH(){
w = $(window).width();
h = $(window).height();
$(‘#dialogBg’).width(w).height(h);
}
window.onresize = function(){
getSrceenWH();
}
$(window).resize();
$(function(){
getSrceenWH();
//显示弹框
$(‘.popup-box a’).click(function(){
className = $(this).attr(‘class’);
$(‘#dialogBg’).fadeIn(300);
$(‘#dialog’).removeAttr(‘class’).addClass(‘animated ‘+className+”).fadeIn();
});
//关闭弹窗
$(‘.claseDialogBtn’).click(function(){
$(‘#dialogBg’).fadeOut(300,function(){
$(‘#dialog’).addClass(‘bounceOutUp’).fadeOut();
});
});
});