下午吃瓜时间到，快带嘴来！哈哈！
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>
