實用帶多種CSS動畫特效的jQuery彈出層插件hDialog.js
<!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">
<link rel="stylesheet" href="common.css"/>
<!-- 基本樣式 -->
<link rel="stylesheet" href="animate.min.css"/>
<!-- 動畫效果 -->
<title>實用帶多種CSS動畫特效的jQuery彈出層插件hDialog.js - JS代碼網</title>
<meta name="Keywords" content="jQuery彈出層插件,js彈出層插件,jQuery彈出窗口,jQuery hDialog.js,jQuery彈出框,js彈出窗口" />
<meta name="description" content="JS代碼網提供大量高質量的jQuery彈出層彈出窗口學習和下載" />
</head>
<body>
<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"> </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="jquery.min.js"></script>
<script src="jquery.hDialog.js"></script>
<script>
$(function(){
var $el = $('.dialog');
$el.hDialog();
//帶標題的
$('.demo0').hDialog({title:'JS代碼網',height:320});
//改變寬度
$('.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('玩命加載中...',140,40);
});
//移除加載
$('.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'});
},2000);
}
});
});
</script>
</body>
</html>
<div style="display:none">
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F6f798e51a1cd93937ee8293eece39b1a' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_5718743'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s9.cnzz.com/stat.php%3Fid%3D5718743%26show%3Dpic2' type='text/javascript'%3E%3C/script%3E"));</script>
</div>
相關文章
- 1. JQUERY彈出層 三種彈出效果
- 2. jquery 彈出層插件
- 3. jQuery彈出層插件popbox
- 4. 效果非常好的 Jquery彈出層插件 jQuery Sweet alert
- 5. jquery 動畫效果插件
- 6. css+div+jquery彈出層
- 7. jQuery特效動畫
- 8. jQuery動畫特效
- 9. jquery 彈出插件
- 10. jQuery 插件開發——PopupLayer(彈出層)
- 更多相關文章...
- • jQuery Mobile 彈窗 - jQuery Mobile 教程
- • W3C CSS 活動 - W3C 教程
- • IntelliJ IDEA安裝代碼格式化插件
- • Docker容器實戰(七) - 容器眼光下的文件系統
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章