基于jquery實現動畫彈出表單代碼



68 270 91



特效描述:基于jquery實現 動畫彈出 表單代碼,基于jquery實現動畫彈出表單代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/animate.min.css"/>

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/jquery.hDialog.min.js"></script>

3. HTML代碼

<div id="wrapper">
	<header><h2></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">&nbsp;</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">&nbsp;</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>
$(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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 浮動提示框 切換按鈕 表單 表單美化 表單插件 表單美化插件 浮動菜單 浮動導航 提示框/彈出層 文本框 text文本框 單選框 單選按鈕 表單提交
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子