非常棒一jquery弹框插件_jquery_其他

<!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"> <meta name="author" content="haibao"/> <meta name="url" content="http://www.jqueryfuns.com/"/> <meta name="keywords" content="jquery,css3,表单,弹出层,插件"/> <meta name="description" content="jQuery+Css3 多功能表单弹出层插件"/> <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> <div class="example"> <a href="javascript:;" class="bounceIn dialog" rel='nofollow' onclick='return false;'>bounceIn动画</a> <a href="javascript:;" class="bounceInDown dialog" rel='nofollow' onclick='return false;'>bounceInDown动画</a> <a href="javascript:;" class="bounceInLeft dialog" rel='nofollow' onclick='return false;'>bounceInLeft动画</a> <a href="javascript:;" class="bounceInRight dialog" rel='nofollow' onclick='return false;'>bounceInRight动画</a> <a href="javascript:;" class="bounceInUp dialog" rel='nofollow' onclick='return false;'>bounceInUp动画</a> <a href="javascript:;" class="rollIn dialog" rel='nofollow' onclick='return false;'>rollIn动画</a> <a href="javascript:;" class="fadeIn dialog" rel='nofollow' onclick='return false;'>fadeIn动画</a> <a href="javascript:;" class="fadeInUpBig dialog" rel='nofollow' onclick='return false;'>fadeInUpBig动画</a> <a href="javascript:;" class="lightSpeedIn dialog" rel='nofollow' onclick='return false;'>lightSpeedIn动画</a> <a href="javascript:;" class="flipInX dialog" rel='nofollow' onclick='return false;'>flipInX动画</a> <a href="javascript:;" class="rotateInDownLeft dialog" rel='nofollow' onclick='return false;'>rotateInDownLeft动画</a> <a href="javascript:;" class="rotateInDownRight dialog" rel='nofollow' onclick='return false;'>rotateInDownRight动画</a> <a href="javascript:;" class="rotateInUpLeft dialog" rel='nofollow' onclick='return false;'>rotateInUpLeft动画</a> <a href="javascript:;" class="rotateInUpRight dialog" rel='nofollow' onclick='return false;'>rotateInUpRight动画</a> <a href="javascript:;" class="rubberBand dialog" rel='nofollow' onclick='return false;'>rubberBand动画</a> <a href="javascript:;" class="zoomIn dialog" rel='nofollow' onclick='return false;'>zoomIn动画</a> <a href="javascript:;" class="zoomInDown dialog" rel='nofollow' onclick='return false;'>zoomInDown动画</a> <a href="javascript:;" class="zoomInLeft dialog" rel='nofollow' onclick='return false;'>zoomInLeft动画</a> <a href="javascript:;" class="zoomInRight dialog" rel='nofollow' onclick='return false;'>zoomInRight动画</a> <a href="javascript:;" class="zoomInUp dialog" rel='nofollow' onclick='return false;'>zoomInUp动画</a> </div> <h3>> 表单示例:</h3> <div class="example"> <a href="javascript:;" class="demo0" rel='nofollow' onclick='return false;'>带标题的</a> <a href="javascript:;" class="demo16" rel='nofollow' onclick='return false;'>淡出关闭效果</a> <a href="javascript:;" class="demo1" rel='nofollow' onclick='return false;'>改变宽度</a> <a href="javascript:;" class="demo2" rel='nofollow' onclick='return false;'>改变高度</a> <a href="javascript:;" class="demo3" rel='nofollow' onclick='return false;'>改变宽和高</a> <a href="javascript:;" class="demo4" rel='nofollow' onclick='return false;'>改变位置</a> <a href="javascript:;" class="demo14" rel='nofollow' onclick='return false;'>显示前回调</a> <a href="javascript:;" class="demo15" rel='nofollow' onclick='return false;'>隐藏后回调</a> <a href="javascript:;" class="demo5" rel='nofollow' onclick='return false;'>不重置表单</a> <a href="javascript:;" class="demo6" rel='nofollow' onclick='return false;'>遮罩不可点击关闭</a> <a href="javascript:;" class="demo7" rel='nofollow' onclick='return false;'>改变弹框背景色</a> <a href="javascript:;" class="demo8" rel='nofollow' onclick='return false;'>改变遮罩背景色</a> <a href="javascript:;" class="demo9" rel='nofollow' onclick='return false;'>改变关闭按钮背景色</a> <a href="javascript:;" class="demo18" rel='nofollow' onclick='return false;'>不显示关闭按钮</a> <a href="javascript:;" class="demo10" rel='nofollow' onclick='return false;'>错误提示</a> <a href="javascript:;" class="demo11" rel='nofollow' onclick='return false;'>正确提示</a> <a href="javascript:;" class="demo12" rel='nofollow' onclick='return false;'>显示加载</a> <a href="javascript:;" class="demo13" rel='nofollow' onclick='return false;'>移除加载</a> <a href="javascript:;" class="demo17 bounceIn" rel='nofollow' onclick='return false;'>鼠标放这触发</a> </div> <div class="desc"> <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，可不填写) * - $.goTop(); //返回顶部,(参数1：和屏幕底部的距离，参数2：和屏幕右侧的距离； PS:自定义一定要加单位，比如px,em, 也可以是百分比哦) */ </pre> </div> </div>  <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>