浏览器兼容性的问题、支持IE8、不支持IE6、想解决这个问题、两个都支持、
0
悬赏园豆：5
[已关闭问题]
关闭于 2010-10-10 19:37
代码
1 /**
2 * ymPrompt.js 消息提示组件
3 * @author netman8410@163.com
4 */
5 //<meta http-equiv="X-UA-Compatible" content="IE=7" /> IE8透明度解决方案
6 (function() {
7 if (window.ymPrompt) return;
8 window.ymPrompt = {
9 version: '4.0',
10 pubDate: '2009-02-03',
11 apply: function(o, c, d) {
12 if (d) ymPrompt.apply(o, d);
13 if (o && c && typeof c == 'object') for (var p in c) o[p] = c[p];
14 return o;
15 },
16 eventList: []
17 };
18 /*初始化组件的接口，防止外部调用失败。_initFn:缓存初始调用传入的参数*/
19 var initFn = ['getPage', 'resizeWin', 'doHandler', 'close', 'setDefaultCfg','show'], _initFn = {},t;
20 while(t=initFn.shift()) ymPrompt[t] = eval('0,function(){_initFn.'+t+'=arguments}');
21
22 /*以下为公用函数及变量*/
23 var useIframe = /MSIE (\d)\./.test(navigator.userAgent) && parseInt(RegExp.$1) < 7; //是否需要用iframe来遮罩
24 var $ = function(id) {
25 return document.getElementById(id)
26 }; //获取元素
27 var $height = function(obj) {
28 return parseInt(obj.style.height) || obj.offsetHeight
29 }; //获取元素高度
30 var addEvent = (function() {
31 return new Function('env','fn','obj',['obj=obj||document;', window.attachEvent ? "obj.attachEvent('on'+env,fn)": 'obj.addEventListener(env,fn,false)', ';ymPrompt.eventList.push([env,fn,obj])'].join(''))
32 })(); //事件绑定
33 var detachEvent = (function() {
34 return new Function('env','fn','obj',['obj=obj||document;', window.attachEvent ? "obj.detachEvent('on'+env,fn)": 'obj.removeEventListener(env,fn,false)'].join(''))
35 })(); //取消事件绑定
36 //为元素的特定样式属性设定值
37 var setStyle = function(el, n, v) {
38 if (!el) return;
39 if (typeof n == 'object') {
40 for (var i in n) setStyle(el, i, n[i]);
41 return;
42 }
43 /*dom数组或dom集合*/
44 if (el instanceof Array || /htmlcollection|nodelist/i.test(''+el)) {
45 for (var i = el.length - 1; i >= 0; i--) setStyle(el[i], n, v);
46 return;
47 }
48 el.style[n] = v;
49 };
50 /*----------------和业务有关的公用函数-----------------*/
51 var btnIndex = 0, btnCache, seed = 0; //当前焦点的按钮的索引、当前存在的按钮、id种子
52 /*创建按钮*/
53 var defaultBtn=function(){return {OK:[curCfg.okTxt, 'ok'], CANCEL:[curCfg.cancelTxt, 'cancel']}};
54 var mkBtn = function(txt, sign, autoClose, id) {
55 if (!txt) return;
56 if (txt instanceof Array) {
57 /*无效按钮删除*/
58 var item,t=[];
59 while(txt.length) (item=txt.shift())&&t[t.push(mkBtn.apply(null, defaultBtn()[item]||item))-1]||t.pop();
60 return t;
61 }
62 id = id || 'ymPrompt_btn_' + seed++;
63 autoClose = typeof autoClose == 'undefined' ? 'undefined': !!autoClose;
64 return {
65 id: id,
66 html: "<input type='button' id='" + id + "' onclick='ymPrompt.doHandler(\"" + sign + "\"," + autoClose + ")' style='cursor:pointer' class='btnStyle handler' value='" + txt + "' />"
67 };
68 }
69 /*生成按钮组合的html*/
70 var joinBtn = function(btn) {
71 if (!btn) return btnCache = '';
72 if (! (btn instanceof Array)) btn = [btn];
73 if(!btn.length) return btnCache='';
74 btnCache = btn.concat();
75 var html=[];
76 while(btn.length) html.push(btn.shift().html);
77 return html.join(' ');
78 }
79 /*默认显示配置及用户当前配置*/
80 var dftCfg = {
81 titleBar: true,
82 fixPosition: false,
83 dragOut: true,
84 autoClose: true,
85 showMask: true,
86 maskAlphaColor: '#000', //遮罩透明色
87 maskAlpha: 0.1, //遮罩透明度
88 title: '标题', //消息框标题
89 message: '内容', //消息框按钮
90 width: 300,
91 height: 185,
92 winPos: 'c',
93 iframe: false,
94 btn: null,
95 closeTxt: '关闭',
96 okTxt:' 确 定 ',
97 cancelTxt:' 取 消 ',
98 icoCls: '',
99 handler: function() {} //回调事件
100 },curCfg = {};
101 /*开始解析*/
102 (function() {
103 if (!document.body || typeof document.body != 'object') return addEvent('load', arguments.callee, window); //等待页面加载完成
104 var rootEl = document.compatMode == 'CSS1Compat' ? document.documentElement: document.body; //根据html Doctype获取html根节点，以兼容非xhtml的页面
105 /*保存窗口定位信息*/
106 var saveWinInfo = function() {
107 ymPrompt.apply(dragVar, {
108 offX: ym_win.offsetLeft-rootEl.scrollLeft, //弹出框相对屏幕的位移差
109 offY: ym_win.offsetTop-rootEl.scrollTop
110 });
111 };
112 /*-------------------------创建弹窗html-------------------*/
113 var maskStyle = 'position:absolute;top:0;left:0;display:none;text-align:center';
114 var div = document.createElement('div');
115 div.innerHTML = [
116 /*遮罩*/
117 "<div id='maskLevel' style=\'" + maskStyle + ';z-index:10000;\'></div>', useIframe ? ("<iframe id='maskIframe' style='" + maskStyle + ";z-index:9999;filter:alpha(opacity=0);opacity:0'></iframe>") : '',
118 /*窗体*/
119 "<div id='ym-window' style='position:absolute;z-index:10001;display:none'>", useIframe ? "<iframe style='width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1'></iframe>": '', "<div class='ym-tl' id='ym-tl'><div class='ym-tr'><div class='ym-tc' style='cursor:move;'><div class='ym-header-text'></div><div class='ym-header-tools'></div></div></div></div>", "<div class='ym-ml' id='ym-ml'><div class='ym-mr'><div class='ym-mc'><div class='ym-body'></div></div></div></div>", "<div class='ym-ml' id='ym-btnl'><div class='ym-mr'><div class='ym-btn'></div></div></div>", "<div class='ym-bl' id='ym-bl'><div class='ym-br'><div class='ym-bc'></div></div></div>", "</div>"].join('');
120 document.body.appendChild(div),div = null;
121
122 var dragVar = {};
123 /*mask、window*/
124 var maskLevel = $('maskLevel');
125 var maskIframe = $('maskIframe');
126 var ym_win = $('ym-window');
127 /*header*/
128 var ym_headbox = $('ym-tl');
129 var ym_head = ym_headbox.firstChild.firstChild;
130 var ym_hText = ym_head.firstChild;
131 var ym_hTool = ym_hText.nextSibling;
132 /*content*/
133 var ym_body = $('ym-ml').firstChild.firstChild.firstChild;
134 /*button*/
135 var ym_btn = $('ym-btnl');
136 var ym_btnContent = ym_btn.firstChild.firstChild;
137 /*bottom*/
138 var ym_bottom = $('ym-bl');
139 /*绑定事件*/
140 var mEvent=function(e) {
141 e = e || window.event;
142 var sLeft = dragVar.offX + (e.x||e.pageX);
143 var sTop = dragVar.offY + (e.y||e.pageY);
144
145 if (!curCfg.dragOut) {
146 var sl = rootEl.scrollLeft,st = rootEl.scrollTop;
147 sLeft = Math.min(Math.max(sLeft, sl), rootEl.clientWidth - ym_win.offsetWidth + sl);
148 sTop = Math.min(Math.max(sTop, st), rootEl.clientHeight - ym_win.offsetHeight + st);
149 }
150 try{setStyle(ym_win, {
151 left: sLeft + "px",
152 top: sTop + "px"
153 });}catch(e){}
154 }; //mousemove事件
155 var uEvent=function() {
156 var bindEl=ym_head.releaseCapture&&ym_head;
157 detachEvent("mousemove",mEvent,bindEl);
158 detachEvent("mouseup",uEvent,bindEl);
159 saveWinInfo();
160 bindEl&&(detachEvent("losecapture",uEvent,bindEl),bindEl.releaseCapture());
161 }; //mouseup事件
162 addEvent('mousedown',function(e) {
163 e = e || window.event;
164 ymPrompt.apply(dragVar, {
165 offX: ym_win.offsetLeft-(e.x||e.pageX), //鼠标与弹出框的左上角的位移差
166 offY: ym_win.offsetTop-(e.y||e.pageY)
167 });
168 var bindEl=ym_head.setCapture&&ym_head;
169 addEvent("mousemove",mEvent,bindEl);
170 addEvent("mouseup",uEvent,bindEl);
171 bindEl&&(addEvent("losecapture",uEvent,bindEl),bindEl.setCapture());
172 },ym_head);
173
174 /*键盘监听*/
175 var keydownEvent=function(e) {
176 var e = e || event;
177 if(e.keyCode==27) destroy();//esc键
178 if(btnCache){
179 var l = btnCache.length,nofocus;
180 /*tab键/左右方向键切换焦点*/
181 document.activeElement.id!=btnCache[btnIndex].id && (nofocus=true);
182 if (e.keyCode == 9 || e.keyCode == 39) nofocus&&(btnIndex=-1),$(btnCache[++btnIndex == l ? (--btnIndex) : btnIndex].id).focus();
183 if (e.keyCode == 37) nofocus&&(btnIndex=l),$(btnCache[--btnIndex < 0 ? (++btnIndex) : btnIndex].id).focus();
184 if (e.keyCode == 13) return true;
185 }
186 /*屏蔽所有键盘操作包括刷新等*/
187 if ((e.keyCode > 110 && e.keyCode < 123) || e.keyCode == 9 || e.keyCode == 13) {
188 try {
189 e.returnValue=!(e.cancelBubble = true);
190 e.keyCode = 0;
191 } catch(ex) {
192 try {
193 e.stopPropagation();
194 e.preventDefault();
195 } catch(e) {}
196 }
197 }
198 };
199 /*页面滚动弹出窗口滚动*/
200 var scrollEvent=function(){
201 setStyle(ym_win, {
202 left: (dragVar.offX + rootEl.scrollLeft) + 'px',
203 top: (dragVar.offY + rootEl.scrollTop) + 'px'
204 });
205 };
206 maskLevel.oncontextmenu = ym_win.onselectstart = ym_win.oncontextmenu = function() {return false}; //禁止右键
207 /*重新计算遮罩的大小*/
208 var _resizeMask=function(){
209 setStyle([maskLevel, maskIframe], {
210 width: rootEl.scrollWidth + 'px',
211 height: rootEl.scrollHeight + 'px',
212 display:''
213 });
214 };
215 var resizeMask=function(){
216 setStyle([maskLevel, maskIframe], 'display', 'none'); //先隐藏
217 /*IE下必须有延迟才能正确计算*/
218 !+'\v1'?setTimeout(_resizeMask,0):_resizeMask();
219 }
220 /*蒙版的显示隐藏,state:true显示,false隐藏，默认为true*/
221 var maskVisible = function(visible) {
222 if (!curCfg.showMask) return;
223 setStyle([maskLevel, maskIframe], 'display', 'none'); //先隐藏
224 (visible === false?detachEvent:addEvent)("resize",resizeMask,window);
225 if (visible === false) return;
226 setStyle(maskLevel, {
227 background: curCfg.maskAlphaColor,
228 filter: 'alpha(opacity=' + (curCfg.maskAlpha * 100) + ')',
229 opacity: curCfg.maskAlpha
230 });
231 resizeMask();
232
233 };
234 var getPos=function(f){
235 var pos=[rootEl.clientWidth - ym_win.offsetWidth, rootEl.clientHeight - ym_win.offsetHeight, rootEl.scrollLeft, rootEl.scrollTop];
236 var arr=f.replace(/\{(\d)\}/g,function(s,s1){return pos[s1]}).split(',');
237 return [eval(arr[0]),eval(arr[1])];
238 }
239 var posMap = {
240 c: '{0}/2+{2},{1}/2+{3}',
241 l: '{2},{1}/2+{3}',
242 r: '{0}+{2},{1}/2+{3}',
243 t: '{0}/2+{2},{3}',
244 b: '{0}/2,{1}+{3}',
245 lt: '{2},{3}',
246 lb: '{2},{1}+{3}',
247 rb: '{0}+{2},{1}+{3}',
248 rt: '{0}+{2},{3}'
249 }
250 var SetWinSize = function(w, h) {
251 if (!ym_win || ym_win.style.display == 'none') return;
252 curCfg.height = parseInt(h) || dftCfg.height;
253 curCfg.width = parseInt(w) || dftCfg.width;
254 setStyle(ym_win, {
255 left: 0,
256 top: 0,
257 width: curCfg.width + 'px',
258 height: curCfg.height + 'px'
259 });
260 var pos = posMap[curCfg.winPos];
261 pos = pos ? getPos(pos) : curCfg.winPos; //支持自定义坐标
262 if(!(pos instanceof Array))pos=getPos(posMap['c']);
263 setStyle(ym_win, {
264 top: pos[1] + 'px',
265 left: pos[0] + 'px'
266 });
267 saveWinInfo(); //保存当前窗口位置信息
268 setStyle(ym_body, 'height', curCfg.height - $height(ym_headbox) - $height(ym_btn) - $height(ym_bottom) + 'px'); //设定内容区的高度
269 };
270 var _obj=[]; //IE中可见的obj元素
271 var winVisible = function(visible) {
272 var fn=visible===false?detachEvent:addEvent;
273 if (curCfg.fixPosition) fn("scroll", scrollEvent, window);
274 fn("keydown", keydownEvent);
275 if (visible === false) {
276 setStyle(ym_win, 'display', 'none');
277 setStyle(_obj, 'visibility', 'visible');
278 _obj=[];
279 return ;
280 }
281 for(var o=document.getElementsByTagName('object'),i=o.length-1;i>-1;i--) o[i].style.visibility!='hidden'&&_obj.push(o[i])&&(o[i].style.visibility='hidden');
282 setStyle([ym_hText, ym_hTool], 'display', curCfg.titleBar ? '': 'none');
283 ym_head.className = 'ym-tc' + (curCfg.titleBar ? '': ' ym-ttc');
284 ym_hText.innerHTML = curCfg.title; //标题
285 ym_hTool.innerHTML = "<div class='ymPrompt_close' title='"+curCfg.closeTxt+"' onclick='ymPrompt.doHandler(\"close\")'> </div>";
286 ym_body.innerHTML = !curCfg.iframe ? ('<div class="ym-content">' + curCfg.message + '</div>') : "<iframe width='100%' height='100%' border='0' frameborder='0' src='" + curCfg.message + "'></iframe>"; //内容
287 ym_body.className = "ym-body " + curCfg.icoCls; //图标类型
288 setStyle(ym_btn, 'display', (ym_btnContent.innerHTML = joinBtn(mkBtn(curCfg.btn))) ? '': 'none'); //没有按钮则隐藏
289 setStyle(ym_win, 'display', '');
290 SetWinSize(curCfg.width, curCfg.height);
291 btnCache && $(btnCache[btnIndex = 0].id).focus(); //第一个按钮获取焦点
292 }; //初始化
293 var init = function() {
294 maskVisible();
295 winVisible();
296 }; //销毁
297 var destroy = function() {
298 maskVisible(false);
299 winVisible(false);
300 };
301 ymPrompt.apply(ymPrompt, {
302 close: destroy,
303 getPage: function() {
304 return ym_body.firstChild.tagName.toLowerCase() == 'iframe' ? ym_body.firstChild: null
305 },
306 /*显示消息框,fargs:优先配置，会覆盖args中的配置*/
307 show: function(args, fargs) {
308 /*支持两种参数传入方式:(1)JSON方式 (2)多个参数传入*/
309 var a = Array.prototype.slice.call(args, 0),
310 o = {};
311 if (typeof a[0] != 'object') {
312 var cfg = ['message', 'width', 'height', 'title', 'handler', 'maskAlphaColor', 'maskAlpha', 'iframe', 'icoCls', 'btn', 'autoClose', 'fixPosition', 'dragOut', 'titleBar', 'showMask', 'winPos'];
313 for (var i = 0,l = a.length; i < l; i++) if (a[i]) o[cfg[i]] = a[i];
314 } else {
315 o = a[0];
316 }
317 ymPrompt.apply(curCfg, ymPrompt.apply({},o, fargs), ymPrompt.setDefaultCfg()); //先还原默认配置
318 /*修正curCfg中的无效值(null/undefined)改为默认值*/
319 for(var i in curCfg) curCfg[i]=curCfg[i]!=null?curCfg[i]:ymPrompt.cfg[i];
320 init();
321 },
322 doHandler: function(sign, autoClose) {
323 if (typeof autoClose == 'undefined' ? curCfg.autoClose: autoClose) destroy();
324 eval(curCfg.handler)(sign);
325 },
326 resizeWin: SetWinSize,
327 /*设定默认配置*/
328 setDefaultCfg: function(cfg) {
329 return ymPrompt.cfg = ymPrompt.apply({},
330 cfg, ymPrompt.apply({},
331 ymPrompt.cfg, dftCfg));
332 }
333 });
334 ymPrompt.setDefaultCfg(); //初始化默认配置
335 /*执行用户初始化时的调用*/
336 for (var i in _initFn) ymPrompt[i].apply(null, _initFn[i]);
337 /*取消事件绑定*/
338 addEvent('unload',function() {
339 while(ymPrompt.eventList.length) detachEvent.apply(null, ymPrompt.eventList.shift());
340 },window);
341 })();
342 })(); //各消息框的相同操作
343 ymPrompt.apply(ymPrompt, {
344 alert: function() {
345 ymPrompt.show(arguments, {
346 icoCls: 'ymPrompt_alert',
347 btn: ['OK']
348 });
349 },
350 succeedInfo: function() {
351 ymPrompt.show(arguments, {
352 icoCls: 'ymPrompt_succeed',
353 btn: ['OK']
354 });
355 },
356 errorInfo: function() {
357 ymPrompt.show(arguments, {
358 icoCls: 'ymPrompt_error',
359 btn: ['OK']
360 });
361 },
362 confirmInfo: function() {
363 ymPrompt.show(arguments, {
364 icoCls: 'ymPrompt_confirm',
365 btn: ['OK', 'CANCEL']
366 });
367 return false;
368 },
369 win: function() {
370 ymPrompt.show(arguments);
371 }
372 });
373
下面是母版页调用函数的脚本
代码
1 <link href="<%= ResolveUrl("../prompt/skin/qq/ymPrompt.css") %>" rel="stylesheet" type="text/css" />
2 <script type="text/javascript" src="<%= ResolveUrl("~/Js/Script/jqueryaa.js") %>"></script>
3 <script type="text/javascript" src="<%= ResolveUrl("../prompt/ymPrompt.js")%>" ></script>
4 <script type="text/javascript" src="<%= ResolveUrl("../prompt/ymPrompt_Ex.js")%>" ></script>
5 <script type="text/javascript" src="<%= ResolveUrl("../prompt/ymPrompt_source.js")%>" ></script>
6
7
8 <body class="bgbody">
9 <script type="text/javascript">
10 function cn() {
11 ymPrompt.setDefaultCfg({ title: '标题', message: "内容", okTxt: ' 确 定 ', cancelTxt: ' 取 消 ', closeTxt: '关闭' });
12 }
13 function en() {
14 ymPrompt.setDefaultCfg({ title: 'Default Title', message: "Default Message", okTxt: ' OK ', cancelTxt: ' Cancel ', closeTxt: 'close' });
15 }
16 function autoClose() {
17 alert('三秒钟自动关闭');
18 setTimeout(function() { ymPrompt.close() }, 3000)
19 }
20 function handlerIframe() {
21 alert(ymPrompt.getPage().contentWindow.document.body.outerHTML);
22 ymPrompt.close();
23 }
24 function noTitlebar() {
25 alert('提示：除了可以通过增加按钮来控制，还可以在子页面中调用该页面的ymPrompt.close方法来关闭');
26 }
27 var Alert = ymPrompt.alert;
28 function cancelFn() {
29 Alert("取消");
30 }
31 function okFn() {
32 Alert("确定");
33 }
34 function closeFn() {
35 Alert("关闭");
36 }
37 function handler(tp) {
38 if (tp == 'ok') {
39 okFn();
40 }
41 if (tp == 'cancel') {
42 cancelFn();
43 }
44 if (tp == 'close') {
45 closeFn()
46 }
47 }
48 function testHd(tp) {
49 Alert(tp);
50 }
51 function handler2(tp) {
52 if (tp == 'ok') {
53 ymPrompt.confirmInfo("保存成功!是否打印税票？", null, null, "问询提示", function(tp) { tp == 'ok' ? ticketPrevie("print") : loadImposeInfo() })
54 }
55 if (tp == 'cancel') {
56 cancelFn();
57 }
58 if (tp == 'close') {
59 closeFn()
60 }
61 }
62 </script>
在IE6下 报ympromt.alert()这个方法找不到。还有JS中的 ymprompt.alert()找不到。试过了，兼容性问题
这个是一个兼容性的问题，很复杂、我弄了半天，查了半天都不知道，请人帮忙下，指点
所有回答(1)
0
这么长的代码，不想看
就是要这么处理兼容性的问题，我没处理过
