让梦冬眠
封藏纷乱的梦不牵挂
© JinYon.Net
All Rights Reserved.

jQuery+CSS3动画弹出框代码

jquery提示谈话框,用于提示信息,有六种提示效果,把js和css引入项目中,对弹窗稍作修改,即可达到想的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">  
<meta name="apple-mobile-web-app-status-bar-style" content="black">  
<meta content="telephone=no" name="format-detection">
<title>jQuery+CSS3动画弹出框代码</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
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();
	
	//显示弹框
	$(".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();
		});
	});
});
</script>
</head>
<body>
<style>
@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;}

/*------------------- 华丽分割线 -----------------------*/

#dialogBg{width:100%;height:100%;background-color:#000000;opacity:.8;filter:alpha(opacity=60);position:fixed;top:0;left:0;z-index:9999;display:none;}
#dialog{ width: 300px; height: 240px; margin: 0 auto; display: none; background-color: #ffffff; position: fixed; top: 50%; left: 50%; margin: -120px 0 0 -150px; z-index: 10000; border: 1px solid #ccc; border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 3px 2px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 3px 2px 4px rgba(0,0,0,0.2); }
.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;}
.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;}
</style>
<div id="wrapper">

	<header><h2>移动端之“CSS3多动画弹框”</h2></header>
	
	<div class="box">
		<div class="demo">
			<a href="javascript:;" class="bounceIn">DEMO1</a>
			<a href="javascript:;" class="rollIn">DEMO2</a>
			<a href="javascript:;" class="bounceInDown">DEMO3</a>
			<a href="javascript:;" class="flipInX">DEMO4</a>
		</div>
		
		<div id="dialogBg"></div>
		<div id="dialog" class="animated">
			<img class="dialogIco" width="50" height="50" src="images/ico.png" alt="" />
			<div class="dialogTop">
				<a href="javascript:;" class="claseDialogBtn">关闭</a>
			</div>
			<form action="" method="post" id="editForm">
				<ul class="editInfos">
					<li><label><font color="#ff0000">* </font>昵称:<input type="text" name="" required value="" class="ipt" /></label></li>
					<li><label><font color="#ff0000">* </font>手机:<input type="text" name="" required value="" class="ipt" /></label></li>
					<li><label><font color="#ff0000">* </font>地址:<input type="text" name="" required value="" class="ipt" /></label></li>
					<li><input type="submit" value="确认提交" class="submitBtn" /></li>
				</ul>
			</form>
		</div>
	</div>
	
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px MicroSoft YaHei;">
</div>
</body>
</html>

 

2017-02-28
关键字: