辞职前给公司写的一个小玩意MyConfirm
这个是写给公司的CONFIRM 在IE6,7,8,FF下测试通过
另外还有个CSS的文件 没有带回家 所以先把JS代码发出来
(现在已经辞职 不好再回去拿CSS 其实这个东西本身就支持自己定义,大家如果感兴趣可以自己定义一个CSS
发上来,我自认没什么设计感 以前这个东西的样式 都是叫公司美工整出来的 .
)
用法很简单
因为公司最开始用的是JQUERY的插件 jquery.divbox.js
但是问题很大 我在之前也修改了许多
比如 遮罩层遮不全，IE6下遮罩层无法遮罩SELECT
弹出层定位的问题 原来JQUERY弹出层不能正确适应客户端不同分辨率下的定位问题
导致客户端无法使用弹出层的关闭按钮，在下面这个弹出层已经修正了这个问题
可能还有些小BUG 大家发现后可以修正后发上来 共同进步。
/*************************************************************MyConfirm使用说明： （使用之前请确保有jquery.js，在弹出层的定位上使用了JQUERY 若要是用showDialog请确保有jquery.divbox.js） 1.MyConfirm.show("这里是需要显示的内容"); or : MyConfirm.showDialog("这里是需要显示的内容"); 2.MyConfirm.show({ title:"标题", message:"内容", okvalue:"确定按钮的值", cancelvalue:"取消按钮的值", type:ConfirmType.Ok, //ConfirmType.OkCancel,ConfirmType.None onokclick:function() { alert("这里是单击确定按钮事件。。。。\n但是这时并不会关闭层"); //想要关闭层还需要加上这样的语句 MyConfirm.defaultClose(); }, oncancelclick:function() { alert("这里是单击取消按钮事件。。。。\n但是这时并不会关闭层"); //想要关闭层还需要加上这样的语句 MyConfirm.defaultClose(); } //more...... }); 3.给按钮注册事件 MyConfirm.onokclick = function(e) { //e:ff下的event //var myevent = window.event || e; //more...... //close; }; 4.Style: * @param {Object} args * args.allstyle: confirmClass<br> * args.titAllStyle: 标题行的class包括标题和关闭按钮<br> * args.title: 标题<br> * args.titlestyle: 标题样式<br> * args.cloallstyle: 关闭层样式<br> * args.closeImgstyle: 图片样式<br> * args.closeImg: 图片链接<br> * args.messageStyle: 消息框样式<br> * args.message: 消息<br> * args.pbtnStyle: 按钮层样式<br> * args.okstyle: 确定按钮样式<br> * args.okvalue: 确定按钮值<br> * args.onokclick: 确定事件<br>okevent * args.cancelstyle: 取消样式<br> * args.cancelvalue: 取消按钮值<br> * args.oncancelclick: 取消事件<br> * args.type: confrim类型 (ConfirmType.Ok,ConfirmType.OkCancel,ConfirmType.None)<br> tony by 2010****************************************************************/(function() { var ConfirmType = window.ConfirmType = { OkCancel: "OkCancel", Ok: "Ok", None: "None" }; ViewType = { Dialog: "dialog", None: "none" }; /** * confirm对象是否设置到文档中 */ var _isinit = false; var _confirm_type = ConfirmType.OkCancel; var _allStyle = { OkCancel: "wb_opendiv2", Ok: "wb_opendiv2", None: "wb_opendiv1" } /** * 最外层层的className */ var _all_class = "wb_opendiv2", /** 标题大层的class */ _ul_class = "wb_closediv", /** 标题li的class */ _li_title_class = "wb_opentitler", /** 标题内容 */ _title_value = "", /** 关闭li的class */ _close_li_class = "wb_opentitle", /** 关闭图标的class */ _close_img = "", /** 关闭图标的图标地址 */ _img_src = "/usercenter/App_Themes/Group/img/wb_close.png", /** 消息栏目class */ _message_class = "wb_opendivp", /** 消息内容 */ _message_value = "", /** 按钮层样式 */ _pbtn_class = "wb_openbtn", /** Ok按钮样式 */ _ok_btn_class = "", /** OkValue */ _ok_btn_value = "确定", /** 取消按钮样式 */ _cancel_btn_class = "", /** 取消按钮Value */ _cancel_btn_value = "取消", _View = ViewType.None; function _exit() { if (_View == ViewType.Dialog) { $("#_id_tony_all_").CloseDiv(); } else if (_View == ViewType.None) { $i("_id_tony_all_").style.display = "none"; } _clear(); } function _show() { if (_View == ViewType.Dialog) { $("#_id_tony_all_").OpenDiv(); } else if (_View == ViewType.None) { var templocation = getWindowSize(); var PageScroll = getPageScroll(); //var b_w = obj_doc.width(); //var b_h = obj_doc.height(); var b_w = templocation.x; var b_h = templocation.y; //屏幕高度+滚动条高度 var obj_c = $("#_id_tony_all_"); obj_c.css("left", ((b_w - obj_c.width()) / 2) + PageScroll.x + "px").css("top", ((b_h - obj_c.height()) / 2 + PageScroll.y) + "px").css("position", "absolute").css("z-index", 50000); $i("_id_tony_all_").style.display = ""; } regEvent(); } //private var getWindowSize = function() { var result = {}; var docElmt = document.documentElement || {}; var body = document.body || {}; if (typeof (window.innerWidth) == 'number') { // non-IE browsers result.x = window.innerWidth; result.y = window.innerHeight; } else if (docElmt.clientWidth || docElmt.clientHeight) { // IE6+ in standards mode result.x = docElmt.clientWidth; result.y = docElmt.clientHeight; } else if (body.clientWidth || body.clientHeight) { // IE6+ in quirks mode result.x = body.clientWidth; result.y = body.clientHeight; } else { } if (!result.y) result.y = 0; if (!result.x) result.x = 0; return result; }; //private var getPageScroll = function() { var result = {}; var docElmt = document.documentElement || {}; var body = document.body || {}; if (typeof (window.pageXOffset) == "number") { // most browsers result.x = window.pageXOffset; result.y = window.pageYOffset; } else if (body.scrollLeft || body.scrollTop) { // W3C spec, IE6+ in quirks mode result.x = body.scrollLeft; result.y = body.scrollTop; } else if (docElmt.scrollLeft || docElmt.scrollTop) { // IE6+ in standards mode result.x = docElmt.scrollLeft; result.y = docElmt.scrollTop; } if (!result.y) result.y = 0; if (!result.x) result.x = 0; return result; }; function _clear() { _title_value = ""; _message_value = ""; _ok_btn_value = "确定"; _cancel_btn_value = "取消"; MyConfirm.onokclick = _exit; MyConfirm.oncancelclick = _exit; } //'<div id="_id_tony_all_" style="display:none" >' var _code = '<ul id="_id_tony_ul_">' + '<li id="_id_tony_title_">' + '</li>' + '<li id="_id_tony_close_">' + '<img id="_id_tony_close_img_" src="/usercenter/App_Themes/img/wb_close.png" />' + '</li>' + '</ul>' + '<div id="_id_tony_message_" >' + '</div>' + '<div id="_id_tony_pbtn_div_">' + '<input type="button" value="确定" onclick="MyConfirm.onokclick(event)" id="_id_tony_ok_btn_" >' + '<input type="button" value="取消" onclick="MyConfirm.oncancelclick(event)" id="_id_tony_cancel_btn_" >' + '</div>'; function regEvent() { window.onresize = function() { if ($i("_id_tony_all_").style.display == "none") { return; } _show(); }; window.onscroll = function() { if ($i("_id_tony_all_").style.display == "none") { return; } _show(); }; } function _Construction() { if (!_isinit) { var obj_div; try { obj_div = document.createElement("div"); obj_div.innerHTML = _code; obj_div.style.display = "none"; obj_div.id = "_id_tony_all_"; document.body.appendChild(obj_div); _isinit = true; } catch (e) { } obj_div = null; } } function setAttr(args) { _confirm_type = args.type || _confirm_type; _all_class = args.allstyle || _allStyle[_confirm_type]; _ul_class = args.titAllStyle || _ul_class; _li_title_class = args.titlestyle || _li_title_class; _title_value = args.title || _title_value; _close_li_class = args.cloallstyle || _close_li_class; _close_img = args.closeImgstyle || _close_img; _img_src = args.closeImg || _img_src; _message_class = args.messageStyle || _message_class; _message_value = args.message || _message_value; _pbtn_class = args.pbtnStyle || _pbtn_class; _ok_btn_class = args.okstyle || _ok_btn_class; _ok_btn_value = args.okvalue || _ok_btn_value; MyConfirm.onokclick = args.onokclick || _exit; _cancel_btn_class = args.cancelstyle || _cancel_btn_class; _cancel_btn_value = args.cancelvalue || _cancel_btn_value; MyConfirm.oncancelclick = args.oncancelclick || _exit; } function setObj() { _Construction(); $i("_id_tony_all_").setClass(_all_class); $i("_id_tony_ul_").setClass(_ul_class); var obj_title = $i("_id_tony_title_"); obj_title.setClass(_li_title_class); obj_title.innerHTML = _title_value; $i("_id_tony_close_").setClass(_close_li_class); var obj_closeImg = $i("_id_tony_close_img_"); obj_closeImg.setClass(_close_img); obj_closeImg.src = _img_src; obj_closeImg.onclick = _exit; var obj_message = $i("_id_tony_message_"); obj_message.setClass(_message_class); obj_message.innerHTML = _message_value; $i("_id_tony_pbtn_div_").setClass(_pbtn_class); var obj_ok = $i("_id_tony_ok_btn_"); obj_ok.setClass(_ok_btn_class); obj_ok.value = _ok_btn_value; var obj_cancel = $i("_id_tony_cancel_btn_"); obj_cancel.setClass(_cancel_btn_class); obj_cancel.value = _cancel_btn_value; if (_confirm_type == ConfirmType.Ok) { $i("_id_tony_ok_btn_").style.display = ""; $i("_id_tony_cancel_btn_").style.display = "none"; } else if (_confirm_type == ConfirmType.OkCancel) { $i("_id_tony_ok_btn_").style.display = ""; $i("_id_tony_cancel_btn_").style.display = ""; } else if (_confirm_type == ConfirmType.None) { $i("_id_tony_ok_btn_").style.display = "none"; $i("_id_tony_cancel_btn_").style.display = "none"; } } function _setClass(cName) { this.className = ""; this.className = cName; } function $i() { if (arguments[0]) { var obj = document.getElementById(arguments[0]); if (!obj.setClass) { obj.setClass = _setClass; } return obj; } return null; } var _confirm = { /** * @param {Object} args * args.allstyle: confirmClass<br> * args.titAllStyle: 标题行的class包括标题和关闭按钮<br> * args.title: 标题<br> * args.titlestyle: 标题样式<br> * args.cloallstyle: 关闭层样式<br> * args.closeImgstyle: 图片样式<br> * args.closeImg: 图片链接<br> * args.messageStyle: 消息框样式<br> * args.message: 消息<br> * args.pbtnStyle: 按钮层样式<br> * args.okstyle: 确定按钮样式<br> * args.okvalue: 确定按钮值<br> * args.onokclick: 确定事件<br> * args.cancelstyle: 取消样式<br> * args.cancelvalue: 取消按钮值<br> * args.oncancelclick: 取消事件<br> * args.type: confrim类型 (ConfirmType.Ok,ConfirmType.OkCancel,ConfirmType.None)<br> */ init: function(args) { _Construction(); if (!args || args == null) { return; } setAttr(args); }, /** * @param {Object} args * args.allstyle: confirmClass<br> * args.titAllStyle: 标题行的class包括标题和关闭按钮<br> * args.title: 标题<br> * args.titlestyle: 标题样式<br> * args.cloallstyle: 关闭层样式<br> * args.closeImgstyle: 图片样式<br> * args.closeImg: 图片链接<br> * args.messageStyle: 消息框样式<br> * args.message: 消息<br> * args.pbtnStyle: 按钮层样式<br> * args.okstyle: 确定按钮样式<br> * args.okvalue: 确定按钮值<br> * args.onokclick: 确定事件<br>okevent * args.cancelstyle: 取消样式<br> * args.cancelvalue: 取消按钮值<br> * args.oncancelclick: 取消事件<br> * args.type: confrim类型 (ConfirmType.Ok,ConfirmType.OkCancel,ConfirmType.None)<br> */ show: function(args) { if (typeof (args) == "string") { _message_value = args; MyConfirm.onokclick = _exit; MyConfirm.oncancelclick = _exit; } else { this.init(args); } _View = ViewType.None; setObj(); _show(); }, showDialog: function(args) { if (typeof (args) == "string") { _message_value = args; MyConfirm.onokclick = _exit; MyConfirm.oncancelclick = _exit; } else { this.init(args); } _View = ViewType.Dialog; setObj(); _show(); }, defaultClose: function() { _exit(); } }; window.MyConfirm = _confirm;})();