jQuery实现弹出窗口中切换登录与注册表单

下列需要引入animate.min.css动画库:

bounceIn动画   bounceInDown动画   bounceInLeft动画   bounceInRight动画   bounceInUp动画   rollIn动画   fadeIn动画   fadeInUpBig动画   lightSpeedIn动画 flipInX动画   rotateInDownLeft动画   rotateInDownRight动画   rotateInUpLeft动画   rotateInUpRight动画   rubberBand动画   zoomIn动画   zoomInDown动画 zoomInLeft动画   zoomInRight动画   zoomInUp动画

更多示例:

带标题的   淡出关闭效果   改变宽度   改变高度   改变宽和高   改变位置   显示前回调   隐藏后回调   不重置表单   遮罩不可点击关闭   改变弹框背景色 改变遮罩背景色   改变关闭按钮背景色   不显示关闭按钮   错误提示   正确提示   显示加载   移除加载   鼠标放这触发

使用说明:

/*
 * 看了下面的调用示例,你就可以自定义弹框了哦。
 *          - $(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,可不填写)
 */

		

你可能感兴趣的