如何编写适合FireFox的对话框?
程序员文章站
2022-05-18 11:15:03
在设计blog操作流程的时候,计划在添加页面和修改页面都用弹出对话框的方式。添加和修改结束时,点击提交,对话框关闭,同时后面的列表窗口刷新。这样就感觉在用windows的界...
在设计blog操作流程的时候,计划在添加页面和修改页面都用弹出对话框的方式。添加和修改结束时,点击提交,对话框关闭,同时后面的列表窗口刷新。这样就感觉在用windows的界面程序一样,界面友好性很好。
但是在实际操作的时候发生了一个问题,ie的对话框技术,对firefox是不支持的,怎么才能做到既支持ie又支持firefox的对话框呢?
还好,昨天在研究tinymce,里面有支持firefox的对话框技术可以借鉴。
我写的打开对话框的方法:
function popupdialog(url,width,height){
//showx = event.screenx - event.offsetx - 4 - 10 ; // + deltax; 这段代码只对ie有效,已经不用了
//showy = event.screeny - event.offsety -168; // + deltay; 这段代码只对ie有效,已经不用了
var x = parseint(screen.width / 2.0) - (width / 2.0);
var y = parseint(screen.height / 2.0) - (height / 2.0);
var ismsie= (navigator.appname == "microsoft internet explorer"); //判断浏览器
if (ismsie) {
retval = window.showmodaldialog(url, window, "dialogwidth:"+width+"px; dialogheight:"+height+"px; dialogleft:"+x+"px; dialogtop:"+y+"px; status:no; directories:yes;scrollbars:no;resizable=no; " );
} else {
var win = window.open(url, "mcepopup", "top=" + y + ",left=" + x + ",scrollbars=" + scrollbars + ",dialog=yes,modal=yes,width=" + width + ",height=" + height + ",resizable=no" );
eval('try { win.resizeto(width, height); } catch(e) { }');
win.focus();
}
}
在被打开的对话框里,我是用了上下分frame的页面,因为在 ie里,对话框是不可以提交的,但是分成frame后,就可以提交了。
在提交的按钮上,加上这段代码:
function doreload(){
var ismsie= (navigator.appname == "microsoft internet explorer");
if (ismsie){
parent.dialogarguments.location.reload();
}else{
parent.opener.document.location.reload();
}
top.close();
}
两种浏览器的打开对话框的方式不一样
ie:window.showmodaldialog(url, window, "dialogwidth:300px; dialogheight:300px; dialogleft:200px; dialogtop:200px; status:no; directories:yes;scrollbars:no;resizable=no; " );
firefox: window.open(url, "mcepopup", "top=200,left=200,scrollbars=no,dialog=yes,modal=yes,width=300,height=300,resizable=no" );
关闭窗口时:
ie: parent.dialogarguments.location.reload();
firefox:parent.opener.document.location.reload();
还有一个很重要的注意点。firefox好像不支持对话框的window.close();
所以最后使用的关闭窗口用的是 top.close(); 这个ie、firefox都支持。
但是在实际操作的时候发生了一个问题,ie的对话框技术,对firefox是不支持的,怎么才能做到既支持ie又支持firefox的对话框呢?
还好,昨天在研究tinymce,里面有支持firefox的对话框技术可以借鉴。
我写的打开对话框的方法:
function popupdialog(url,width,height){
//showx = event.screenx - event.offsetx - 4 - 10 ; // + deltax; 这段代码只对ie有效,已经不用了
//showy = event.screeny - event.offsety -168; // + deltay; 这段代码只对ie有效,已经不用了
var x = parseint(screen.width / 2.0) - (width / 2.0);
var y = parseint(screen.height / 2.0) - (height / 2.0);
var ismsie= (navigator.appname == "microsoft internet explorer"); //判断浏览器
if (ismsie) {
retval = window.showmodaldialog(url, window, "dialogwidth:"+width+"px; dialogheight:"+height+"px; dialogleft:"+x+"px; dialogtop:"+y+"px; status:no; directories:yes;scrollbars:no;resizable=no; " );
} else {
var win = window.open(url, "mcepopup", "top=" + y + ",left=" + x + ",scrollbars=" + scrollbars + ",dialog=yes,modal=yes,width=" + width + ",height=" + height + ",resizable=no" );
eval('try { win.resizeto(width, height); } catch(e) { }');
win.focus();
}
}
在被打开的对话框里,我是用了上下分frame的页面,因为在 ie里,对话框是不可以提交的,但是分成frame后,就可以提交了。
在提交的按钮上,加上这段代码:
function doreload(){
var ismsie= (navigator.appname == "microsoft internet explorer");
if (ismsie){
parent.dialogarguments.location.reload();
}else{
parent.opener.document.location.reload();
}
top.close();
}
两种浏览器的打开对话框的方式不一样
ie:window.showmodaldialog(url, window, "dialogwidth:300px; dialogheight:300px; dialogleft:200px; dialogtop:200px; status:no; directories:yes;scrollbars:no;resizable=no; " );
firefox: window.open(url, "mcepopup", "top=200,left=200,scrollbars=no,dialog=yes,modal=yes,width=300,height=300,resizable=no" );
关闭窗口时:
ie: parent.dialogarguments.location.reload();
firefox:parent.opener.document.location.reload();
还有一个很重要的注意点。firefox好像不支持对话框的window.close();
所以最后使用的关闭窗口用的是 top.close(); 这个ie、firefox都支持。
下一篇: 盆姐