jquery封装的对话框简单实现


Posted in Javascript onJuly 21, 2013
var _alert_iconCss = "tipmsg_icoInfo"; 
var _confirm_iconCss = "tipmsg_icoConfirm"; 
var _error_iconCss = "tipmsg_icoError"; 
var _warning_iconCss = "tipmsg_icoWarning"; 
function dialogInit(type, msg) { 
var iconCss = ""; 
switch (type) { 
case "confirm" : iconCss = _confirm_iconCss; break; 
case "error" : iconCss = _error_iconCss; break; 
case "warning" : iconCss = _warning_iconCss; break; 
default : iconCss = _alert_iconCss; break; 
} var htmlStr = "<div id='" + type + "Div' style='display: none;'><p><span class='" + iconCss + "' style='float:left; margin:0 7px 50px 0;width:35px;height:35px;'></span>" + msg + "</p></div>"; 
return htmlStr; 
} 
function Alert(msg, okCallback) { 
var title = "提示"; 
var type = "alert"; 
var html = dialogInit(type, msg); 
var div = $("body").find("#"+type+"Div"); 
div.remove(); 
$('body').append($(html)); 
var buttons = {"确定" : function () { 
if(okCallback) okCallback(); 
$(this).dialog("close"); 
} 
}; 
$("#"+type+"Div").dialog({ 
modal : true, 
title : title, 
buttons : buttons 
}); 
} 
function Confirm(msg, okCallback, cancelCallback) { 
var title = "确认"; 
var type = "confirm"; 
var html = dialogInit(type, msg); 
var div = $("body").find("#"+type+"Div"); 
div.remove(); 
$('body').append($(html)); 
var buttons = {"确定" : function () { 
if(okCallback) okCallback(); 
$(this).dialog("close"); 
}, 
"取消" : function () { 
if(cancelCallback) cancelCallback(); 
$(this).dialog("close"); 
} 
}; 
$("#"+type+"Div").dialog({ 
modal : true, 
title : title, 
buttons : buttons 
}); 
} 
function Error(msg, okCallback) { 
var title = "错误"; 
var type = "error"; 
var html = dialogInit(type, msg); 
var div = $("body").find("#"+type+"Div"); 
div.remove(); 
$('body').append($(html)); 
var buttons = {"确定" : function () { 
if(okCallback) okCallback(); 
$(this).dialog("close"); 
} 
}; 
$("#"+type+"Div").dialog({ 
modal : true, 
title : title, 
buttons : buttons 
}); 
} 
function Warning(msg, okCallback) { 
var title = "警告"; 
var type = "warning"; 
var html = dialogInit(type, msg); 
var div = $("body").find("#"+type+"Div"); 
div.remove(); 
$('body').append($(html)); 
var buttons = {"确定" : function () { 
if(okCallback) okCallback(); 
$(this).dialog("close"); 
} 
}; 
$("#"+type+"Div").dialog({ 
modal : true, 
title : title, 
buttons : buttons 
}); 
}
Javascript 相关文章推荐
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
jquery触发a标签跳转事件示例代码
Jul 21 #Javascript
用JavaScript实现动画效果的方法
Jul 20 #Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 #Javascript
js动态创建表格,删除行列的小例子
Jul 20 #Javascript
JavaScript中setAttribute用法介绍
Jul 20 #Javascript
jquery动态添加删除div 具体实现
Jul 20 #Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 #Javascript
You might like
php在window iis的莫名问题的测试方法
2013/05/14 PHP
分享PHP header函数使用教程
2013/09/05 PHP
thinkPHP查询方式小结
2016/01/09 PHP
ASP Json Parser修正版
2009/12/06 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
总结Python编程中三条常用的技巧
2015/05/11 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
python图形用户接口实例详解
2019/12/16 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
Python 实现简单的客户端认证
2020/07/29 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
安全教育感言
2014/03/04 职场文书
个人函授自我鉴定
2014/03/25 职场文书
搞笑爱情保证书
2014/04/29 职场文书
身边的榜样活动方案
2014/08/20 职场文书
走群众路线学习笔记
2014/11/06 职场文书
小学优秀学生评语
2014/12/29 职场文书
婚礼答谢礼品
2015/01/20 职场文书
出生证明格式
2015/06/15 职场文书
婚宴父亲致辞
2015/07/27 职场文书
七年级思品教学反思
2016/02/20 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书