以下是 jquery+css3动画弹出表单提交代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<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,email=no" name="format-detection">
<link rel="stylesheet" href="css/common.css"/><!-- 基本样式 -->
<link rel="stylesheet" href="css/animate.min.css"/> <!-- 动画效果 -->
<title>jquery+css3动画弹出表单提交代码</title>
</head>
<body>
<div id="wrapper">
<header><h2>jQuery+Css3 多功能表单弹出层插件</h2></header>
<div class="box">
<div class="demo">
<h3>下列需要引入animate.min.css动画库：</h3>
<a href="javascript:;" class="bounceIn dialog">bounceIn动画</a>
<a href="javascript:;" class="bounceInDown dialog">bounceInDown动画</a>
<a href="javascript:;" class="bounceInLeft dialog">bounceInLeft动画</a>
<a href="javascript:;" class="bounceInRight dialog">bounceInRight动画</a>
<a href="javascript:;" class="bounceInUp dialog">bounceInUp动画</a>
<a href="javascript:;" class="rollIn dialog">rollIn动画</a>
<a href="javascript:;" class="fadeIn dialog">fadeIn动画</a>
<a href="javascript:;" class="fadeInUpBig dialog">fadeInUpBig动画</a>
<a href="javascript:;" class="lightSpeedIn dialog">lightSpeedIn动画</a>
<a href="javascript:;" class="flipInX dialog">flipInX动画</a>
<a href="javascript:;" class="rotateInDownLeft dialog">rotateInDownLeft动画</a>
<a href="javascript:;" class="rotateInDownRight dialog">rotateInDownRight动画</a>
<a href="javascript:;" class="rotateInUpLeft dialog">rotateInUpLeft动画</a>
<a href="javascript:;" class="rotateInUpRight dialog">rotateInUpRight动画</a>
<a href="javascript:;" class="rubberBand dialog">rubberBand动画</a>
<a href="javascript:;" class="zoomIn dialog">zoomIn动画</a>
<a href="javascript:;" class="zoomInDown dialog">zoomInDown动画</a>
<a href="javascript:;" class="zoomInLeft dialog">zoomInLeft动画</a>
<a href="javascript:;" class="zoomInRight dialog">zoomInRight动画</a>
<a href="javascript:;" class="zoomInUp dialog">zoomInUp动画</a>
<h3>更多示例:</h3>
<a href="javascript:;" class="demo0">带标题的</a>
<a href="javascript:;" class="demo16">淡出关闭效果</a>
<a href="javascript:;" class="demo1">改变宽度</a>
<a href="javascript:;" class="demo2">改变高度</a>
<a href="javascript:;" class="demo3">改变宽和高</a>
<a href="javascript:;" class="demo4">改变位置</a>
<a href="javascript:;" class="demo14">显示前回调</a>
<a href="javascript:;" class="demo15">隐藏后回调</a>
<a href="javascript:;" class="demo5">不重置表单</a>
<a href="javascript:;" class="demo6">遮罩不可点击关闭</a>
<a href="javascript:;" class="demo7">改变弹框背景色</a>
<a href="javascript:;" class="demo8">改变遮罩背景色</a>
<a href="javascript:;" class="demo9">改变关闭按钮背景色</a>
<a href="javascript:;" class="demo18">不显示关闭按钮</a>
<a href="javascript:;" class="demo10">错误提示</a>
<a href="javascript:;" class="demo11">正确提示</a>
<a href="javascript:;" class="demo12">显示加载</a>
<a href="javascript:;" class="demo13">移除加载</a>
<a href="javascript:;" class="demo17 bounceIn">鼠标放这触发</a>
<h3>使用说明：</h3>
<pre>
/*
* 看了下面的调用示例，你就可以自定义弹框了哦。
* - $(element).hDialog(); //默认调用弹框；
* - $(element).hDialog({box: '#demo'}); //自定义弹框容器ID/Class；
* - $(element).hDialog({boxBg: '#eeeeee'}); //自定义弹框容器背景；
* - $(element).hDialog({modalBg: '#eeeeee'}); //自定义遮罩背景颜色；
* - $(element).hDialog({closeBg: '#eeeeee'}); //自定义关闭按钮背景颜色；
* - $(element).hDialog({width: 500}); //自定义弹框宽度；
* - $(element).hDialog({height: 400}); //自定义弹框高度；
* - $(element).hDialog({position: 'top'}); //top:弹框顶部居中,center:绝对居中,left:顶部居左；
* - $(element).hDialog({triggerEvent: 'mouseenter'}); //弹框触发方式；
* - $(element).hDialog({effect: 'fadeOut'}); //弹框关闭效果；
* - $(element).hDialog({closeHide: false}); //是否隐藏关闭按钮(默认true：不隐藏，false：隐藏)
* - $(element).hDialog({resetForm: false}); //false:不重置表单,反之重置；
* - $(element).hDialog({modalHide: false}); //false:点击遮罩背景不关闭弹框,反之关闭；
* - $(element).hDialog({escHide: false}); //false:按ESC不关闭弹框,反之关闭；
*
* 也可以这样：
* - $(element).hDialog({
* box: '#demo',
* boxBg: '#eeeeee',
* modalBg: '#eeeeee',
* closeBg: 'rgba(0,0,0,0.6)',
* width: 500,
* height: 400,
* positions: 'top',
* triggerEvent: 'mouseenter',
* effect: 'hide',
* closeHide: false,
* resetForm: false,
* modalHide: false,
* escHide: false,
* beforeShow: function(){ alert('执行回调'); },
* afterHide: function(){ alert('执行回调'); }
* });
*
* 下面是简单的扩展方法(以后再慢慢补充吧)：
* - $.tooltip('错误提示文字'); 或者 $.tooltip('正确提示文字',4000,true); //内置2种提示风格(参数1为提示文字，参数2为自动关闭时间，参数3：true为正确，false为错误)
* - $.showLoading('正在加载...',100,30); 或者 $.hideLoading(); //显示/移除加载(参数1为说明文字，参数2为宽度，参数3为高度，默认宽高为90*30，可不填写)
*/
</pre>
</div><!-- demo end -->
<!-- 注意：请将要放入弹框的内容放在比如id="HBox"的容器中，然后将box的值换成该ID即可，比如：$(element).hDialog({'box':'#HBox'}); -->
<div id="HBox">
<form action="" method="post" onsubmit="return false;">
<ul class="list">
<li>
<strong>昵 称 <font color="#ff0000">*</font></strong>
<div class="fl"><input type="text" name="nickname" value="" class="ipt nickname" /></div>
</li>
<li>
<strong>手 机 <font color="#ff0000">*</font></strong>
<div class="fl"><input type="text" name="phone" value="" class="ipt phone" /></div>
</li>
<li>
<strong>邮 箱 <font color="#ff0000">*</font></strong>
<div class="fl"><input type="text" name="email" value="" class="ipt email" /></div>
</li>
<li>
<strong>性 别 <font color="#ff0000"> </font></strong>
<div class="fl">
<label class="mr10"><input type="radio" name="sex" value="1"/>男</label>
<label class="mr10"><input type="radio" name="sex" value="2"/>女</label>
<label><input type="radio" name="sex" value="3"/>保密</label>
</div>
</li>
<li>
<strong>爱 好 <font color="#ff0000"> </font></strong>
<div class="fl">
<label class="mr10"><input type="checkbox" name="like" value="男" />男</label>
<label class="mr10"><input type="checkbox" name="like" value="女"/>女</label>
<label><input type="checkbox" name="like" value="都喜欢"/>都喜欢</label>
</div>
</li>
<li><input type="submit" value="确认提交" class="submitBtn" /></li>
</ul>
</form>
</div><!-- HBox end -->
</div><!-- box end -->
</div><!-- wrapper end -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hDialog.min.js"></script>
<script>
$(function(){
var $el = $('.dialog');
$el.hDialog();
//带标题的
$('.demo0').hDialog({title: '测试弹框标题',height: 300});
//改变宽度
$('.demo1').hDialog({width: 500});
//改变高度
$('.demo2').hDialog({height: 400});
//改变宽和高
$('.demo3').hDialog({width:600,height: 500});
//改变位置
$('.demo4').hDialog({positions: 'top'});
//不清空表单
$('.demo5').hDialog({resetForm: false});
//遮罩不可关闭
$('.demo6').hDialog({modalHide: false});
//改变弹框背景色
$('.demo7').hDialog({boxBg: '#eeeeee'});
//改变遮罩背景色
$('.demo8').hDialog({modalBg: 'rgba(255,255,255,0.7)'});
//改变关闭背景色
$('.demo9').hDialog({closeBg: '#4A74B5'});
//错误文字提示
$('.demo10').click(function(){
$.tooltip('My God, 出错啦！！！');
});
//正确文字提示
$('.demo11').click(function(){
$.tooltip('OK, 操作成功！', 2500, true);
});
//显示加载
$('.demo12').click(function(){
//自定义文字： $.showLoading('玩命加载中...');
//自定义宽高： $.showLoading('努力加载中...',140,40);
$.showLoading();
});
//移除加载
$('.demo13').click(function(){
$.hideLoading();
});
//显示前的回调方法
$('.demo14').hDialog({beforeShow: function(){
alert('显示前执行');
}});
//隐藏后的回调方法
$('.demo15').hDialog({afterHide: function(){
alert('隐藏后执行');
}});
//fadeOut淡出关闭效果
$('.demo16').hDialog({effect: 'fadeOut'});
//悬浮触发
$('.demo17').hDialog({triggerEvent: 'mouseenter'});
//不显示关闭按钮
$('.demo18').hDialog({closeHide: false});
//提交并验证表单
$('.submitBtn').click(function() {
var EmailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //邮件正则
var PhoneReg = /^0{0,1}(13[0-9]|15[0-9]|153|156|18[7-9])[0-9]{8}$/ ; //手机正则
var $nickname = $('.nickname');
var $email = $('.email');
var $phone = $('.phone');
if($nickname.val() == ''){
$.tooltip('昵称还没填呢...'); $nickname.focus();
}else if($phone.val() == ''){
$.tooltip('手机还没填呢...'); $phone.focus();
}else if(!PhoneReg.test($phone.val())){
$.tooltip('手机格式错咯...'); $phone.focus();
}else if($email.val() == ''){
$.tooltip('邮箱还没填呢...'); $email.focus();
}else if(!EmailReg.test($email.val())){
$.tooltip('邮箱格式错咯...'); $email.focus();
}else{
$.tooltip('提交成功，2秒后自动关闭',2000,true);
setTimeout(function(){
//$el.hDialog('close',{box:'#HBox'},'http://smwell.sinaapp.com/'); //也可以加跳转链接哦~
$el.hDialog('close',{box:'#HBox'});
},2000);
}
});
});
</script>
</body>
</html>
JS代码(jquery.hDialog.min.js):
;
(function($,window,document,undefined){
var _doc=$(document),$body=$("body");
methods={
init:function(options){
return this.each(function(){
var $this=$(this),opt=$this.data("hDialog");
if(typeof(opt)=="undefined"){
var defaults={
title:"",box:"#HBox",boxBg:"#fff",modalBg:"rgba(0,0,0,0.5)",closeBg:"#ccc",width:300,height:270,positions:"center",triggerEvent:"click",effect:"hide",resetForm:true,modalHide:true,closeHide:true,escHide:true,beforeShow:function(){
}
,afterHide:function(){
}
}
;
opt=$.extend({
}
,defaults,options);
$this.data("hDialog",opt)}
opt=$.extend({
}
,opt,options);
$(opt.box).hide();
$this.on(opt.triggerEvent,function(){
if(opt.resetForm){
var $obj=$(opt.box);
$obj.find("input[type=text],textarea").val("");
$obj.find("select option").removeAttr("selected");
$obj.find("input[type=radio],input[type=checkbox]").removeAttr("checked")}
if(opt.escHide){
$(document).keyup(function(event){
switch(event.keyCode){
case 27:methods.close(opt);
break}
}
)}
methods.fire.call(this,opt.beforeShow);
methods.add(opt,$this);
var $close=$("#HCloseBtn");
if(opt.modalHide){
$close=$("#HOverlay,#HCloseBtn")}
$close.on("click",function(event){
event=event||window.event;
event.stopPropagation();
methods.close(opt)}
)}
)}
)}
,add:function(o,$this){
var w,h,t,l,m;
$obj=$(o.box);
title=o.title;
c=$this.attr("class");
modalBg=o.modalBg;
closeBg=o.closeBg;
w=o.width!=undefined?parseInt(o.width):"300";
h=o.height!=undefined?parseInt(o.height):"270";
m=""+(-(h/2))+"px 0 0 "+(-(w/2))+"px";
switch(o.positions){
case"center":t=l="50%";
break;
case"top":t=0;
l="50%";
m="0 0 0 "+(-(w/2))+"px";
break;
case"left":t=l=m=0;
break;
default:t=l="50%"}
methods.remove("#HOverlay,#HCloseBtn,#HTitle");
$body.stop().append("<div id='HOverlay' style='width:"+_doc.width()+"px;
height:"+_doc.height()+"px;
background-color:"+modalBg+";
position:fixed;
top:0;
left:0;
z-index:9999;
'></div>");
if(o.title!=""){
$obj.stop().prepend('<div id="HTitle" style="padding:10px 45px 10px 12px;
border-bottom:1px solid #ddd;
background-color:#f2f2f2;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
">'+o.title+"</div>")}
if(o.closeHide!=false){
$obj.stop().append('<a id="HCloseBtn" title="鍏抽棴" style="width:24px;
height:24px;
line-height:18px;
display:inline-block;
cursor:pointer;
background-color:'+closeBg+';
color:#fff;
font-size:1.4em;
text-align:center;
position:absolute;
top:8px;
right:8px;
"><span style="width:24px;
height:24px;
display:inline-block;
">脳</span></a>').css({
"position":"fixed","backgroundColor":o.boxBg,"top":t,"left":l,"margin":m,"zIndex":"100000"}
)}
$obj.stop().animate({
"width":o.width,"height":o.height}
,300).removeAttr("class").addClass("animated "+c+"").show()}
,close:function(o,urls){
var $obj=$(o.box);
switch(o.effect){
case"hide":$obj.stop().hide(_effect);
break;
case"fadeOut":$obj.stop().fadeOut(_effect);
break;
default:$obj.stop().hide(_effect)}
function _effect(){
methods.remove("#HOverlay,.HTooltip");
$(this).removeAttr("class").removeAttr("style").addClass("animated").hide();
if(urls!=undefined){
setTimeout(function(){
window.location.href=urls}
,1000)}
methods.fire.call(this,o.afterHide)}
}
,remove:function(a){
$(a).remove()}
,fire:function(event,data){
if($.isFunction(event)){
return event.call(this,data)}
}
}
;
$.fn.hDialog=function(method){
if(methods[method]){
return methods[method].apply(this,Array.prototype.slice.call(arguments,1))}
else{
if(typeof method==="object"||!method){
return methods.init.apply(this,arguments)}
else{
$.error("Error! Method"+method+"does not exist on jQuery.hDialog锛?)}
}
}
;
$.extend({
showLoading:function(t,w,h){
t=t!=undefined?t:"姝ｅ湪鍔犺浇...";
w=w!=undefined?parseInt(w):"90";
h=h!=undefined?parseInt(h):"30";
var margin=""+(-(h/2))+"px 0 0 "+(-(w/2))+"px";
methods.remove("#HLoading");
$body.stop().append('<div id="HLoading" style="width:'+w+"px;
height:"+h+"px;
line-height:"+h+"px;
background:rgba(0,0,0,0.6);
color:#fff;
text-align:center;
position:fixed;
top:50%;
left:50%;
margin:"+margin+';
">'+t+"</div>")}
,hideLoading:function(){
methods.remove("#HLoading")}
,tooltip:function(t1,t2,t3){
t1=t1!=undefined?t1:"鍝庡憖锛屽嚭閿欏暒 锛?;
t2=t2!=undefined?parseInt(t2):2500;
var tip='<div class="HTooltip shake animated" style="width:280px;
padding:10px;
text-align:center;
background-color:#D84C31;
color:#fff;
position:fixed;
top:10px;
left:50%;
z-index:100001;
margin-left:-150px;
box-shadow:1px 1px 5px #333;
-webkit-box-shadow:1px 1px 5px #333;
">'+t1+"</div>";
if(t3){
tip='<div class="HTooltip fadeIn animated" style="width:280px;
padding:10px;
text-align:center;
background-color:#5cb85c;
color:#fff;
position:fixed;
top:10px;
left:50%;
z-index:100001;
margin-left:-150px;
box-shadow:1px 1px 5px #333;
-webkit-box-shadow:1px 1px 5px #333;
">'+t1+"</div>"}
methods.remove(".HTooltip");
$body.stop().append(tip);
setTimeout(function(){
methods.remove(".HTooltip")}
,t2)}
}
)}
)(jQuery,window,document);
CSS代码(common.css):
@CHARSET "UTF-8";/* * @Description:common css * @author:haibao * @Update:2014-10-23 */
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;margin:0}
a:focus,a:active,button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,select::-moz-focus-inner,input[type="file"] > input[type="button"]::-moz-focus-inner{border:0;outline:0;}
input[type=radio],input[type=checkbox]{margin-right:5px}
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}
/*------------------- 鍗庝附鍒嗗壊绾?-----------------------*/
header{width:92%;margin:0 auto;background:-webkit-gradient(linear,left bottom,right top,color-stop(0%,#020031),color-stop(100%,#6d3353));background:linear-gradient(45deg,#020031 0px,#6d3353 100%) repeat scroll 0 0 rgba(0,0,0,0);box-shadow:0 3px 7px rgba(0,0,0,0.2) inset,0 -3px 7px rgba(0,0,0,0.2) inset;-webkit-box-shadow:0 3px 7px rgba(0,0,0,0.2) inset,0 -3px 7px rgba(0,0,0,0.2) inset;text-align:center;padding:3% 4%;letter-spacing:2px;color:#fff;font-size:1.2em;text-shadow:0 0 2px #999;}
header a{color:#ddd;}
.demo{width:94%;margin:20px auto;text-align:left;}
.demo a{margin:5px 4px;display:inline-block;background-color:#eee;border:1px solid #ccc;padding:4px 10px;}
.demo h3{margin:10px 0;color:#000;}
pre{width:94%;margin:auto auto 10px;font-size:1.1em;}
/*------------------- 鍗庝附鍒嗗壊绾?-----------------------*/
.mr10{margin-right:10px;}
.fl{float:left;}
#HBox{width:300px;height:270px;margin:0 auto;box-shadow:1px 1px 5px #333;-webkit-box-shadow:1px 1px 5px #333;display:none;background-color:#ffffff;position:fixed;top:50%;left:50%;margin:-120px 0 0 -150px;z-index:100000;}
.list{padding:25px 0;}
.list li{width:80%;margin:10px auto auto;overflow:hidden;}
.list li strong{width:20%;float:left;display:inline-block;margin-right:10px;text-align:right;}
.list .fl{width:72%;}
.ipt{width:100%;text-indent:5px;border:1px solid #ccc;padding:5px 0;box-shadow:0 0 3px #ddd inset;-webkit-box-shadow:0 0 3px #ddd inset;}
.ipt:focus{border-color:#66afe9;box-shadow:0 1px 1px rgba(0,0,0,0.075) inset,0 0 6px rgba(102,175,233,0.6);-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.075) inset,0 0 6px rgba(102,175,233,0.6);}
.submitBtn{width:100%;height:32px;line-height:30px;cursor:pointer;margin-top:10px;display:inline-block;text-align:center;background-color:#428bca;color:#fff;padding:0;}
.submitBtn:hover,.submitBtn:disabled{opacity:.8;-webkit-opacity:.8;}
分享到QQ
分享到微博
微信扫一扫
