下列需要引入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,可不填写)
*/