模拟各种系统弹窗-alert/confirm/prompt/

#各种弹窗插件

##最近更新

V1.1.1 : 优化默认为default(即有title，无bot) V1.1.2 : 增加弹窗出来的时候，可传入方法 openFun V1.1.0 : 增加 parentDom 参数，负责传入父级元素 V1.0.5 : 增加css3.0出现隐藏效果，该效果不支持ie9及以下 V1.0.4 ： 优化 moment时 点击黑色背景 提示马上消失 V1.0.3 ： 兼容IE6 V1.0.2 ： 增加closeFun方法,用于接口请求成功之后调用关闭弹窗 V1.0.1 ： 优化confirm点击确定的时候，先关闭该弹窗再运行下个弹窗 V1.0.0 ： 创建该插件

###兼容性

IE6+

###线上地址

戳这里

###参数说明

* 以下均为必填参数 * types : string //弹窗类型，可选择传入：alert/confirm/prompt/loading/moment/closeFun * contents : string //显示内容 * titles : string //弹窗标题，types= "confirm || prompt" 必填; types=alert || loading || moment 不填 * time : int //弹窗关闭倒计时 types=moment时 必填; 其他情况不需要 * * 以下均为可选参数 * id : string //给弹窗赋予id值 * className : string //给弹窗赋予class值 * width ： number //弹窗宽度，不填时默认值200 * height ：number //弹窗高度，不填时默认值110 * ensure : string //确定按钮的文字，不填时默认为“确定” * cancel : string //取消按钮的文字，不填时默认为“确定” * close : string //右上角关闭按钮的内容，可以传入文字或者图片,默认为“+”,css3旋转45°,不兼容IE8及以下 * p : string //传入方法时需要的参数 * callback : function //确定时候需要运行的方法，默认null

###使用方法

html

<a href="javascript:;" class="btn_alert">alert</a> css - 见index.html页面

3.1 先引入以下3个js

jquery-1.8.3.js jquery.dialog.min.js

3.2 最后运行js

$(".btn_alert").click(function(){ $.dialog({ types : 'alert', title : 'alert', contents : '点击确定关闭弹窗' }); }); 实例说明

4.1 types=alert提示，确定后关闭提示弹窗

$.dialog({ types : 'alert', title : 'alert', contents : '点击确定关闭弹窗' });

4.2 types=alert提示，确定后关闭提示弹窗，并且运行一个方法,

$.dialog({ types : 'alert', title : 'alert', contents : '点击确定执行事件', p : [22,33,44], callback : funAlert }); //callback 方法 function funAlert(p){ $.dialog({ types : 'alert', title : 'alert', contents:'输出参数' + p }); }

4.3 types=confirm提示，带有确定和取消的弹窗，点击确定按钮运行方法，点击取消按钮不运行且关闭弹窗

$.dialog({ types : 'confirm', title : 'comfirm', contents :'<h3>title</h3><p>this is p text</p>', width : 300, height : 180, p : 'test', callback : funConfirm }); //callback 方法 function funConfirm(p){ $.dialog({ types : 'alert', contents : '输出参数名' + p }) }

4.4 types=prompt，带有输入框的提示弹窗，点击确定按钮运行方法，点击取消按钮不运行且关闭弹窗

$.dialog({ types : 'prompt', title : 'prompt', contents : '<p>请在下面的输入框输入文字:</p>', width : 300, height : 180, p : 'test', callback : funPrompt }); //callback 方法 function funPrompt(resp, p){ //resp为输入框文字 if(resp){ $.dialog({ types : 'alert', contents : '您输入的文字为 ' + resp + p }) } else { $.dialog({ types : 'alert', contents : '请先输入文字' }) } }

4.5 types=loading 页面加载的时候运行

$.dialog({ types : 'loading', contents : 'loading', width : 100, height : 50 })

4.6 types=moment 短暂的文字提示，出现time毫秒后消失

$.dialog({ types : 'moment', contents : '提示语,几秒后消失', times : 1000, width : 200, height : 50 })