如何編寫適合FireFox的對(duì)話框?
更新時(shí)間:2006年08月08日 00:00:00 作者:
在設(shè)計(jì)Blog操作流程的時(shí)候,計(jì)劃在添加頁(yè)面和修改頁(yè)面都用彈出對(duì)話框的方式。添加和修改結(jié)束時(shí),點(diǎn)擊提交,對(duì)話框關(guān)閉,同時(shí)后面的列表窗口刷新。這樣就感覺(jué)在用Windows的界面程序一樣,界面友好性很好。
但是在實(shí)際操作的時(shí)候發(fā)生了一個(gè)問(wèn)題,IE的對(duì)話框技術(shù),對(duì)FireFox是不支持的,怎么才能做到既支持IE又支持FireFox的對(duì)話框呢?
還好,昨天在研究TinyMCE,里面有支持FireFox的對(duì)話框技術(shù)可以借鑒。
我寫的打開(kāi)對(duì)話框的方法:
function popupDialog(url,width,height){
//showx = event.screenX - event.offsetX - 4 - 10 ; // + deltaX; 這段代碼只對(duì)IE有效,已經(jīng)不用了
//showy = event.screenY - event.offsetY -168; // + deltaY; 這段代碼只對(duì)IE有效,已經(jīng)不用了
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();
}
}
在被打開(kāi)的對(duì)話框里,我是用了上下分Frame的頁(yè)面,因?yàn)樵?nbsp;IE里,對(duì)話框是不可以提交的,但是分成Frame后,就可以提交了。
在提交的按鈕上,加上這段代碼:
function doReload(){
var isMSIE= (navigator.appName == "Microsoft Internet Explorer");
if (isMSIE){
parent.dialogArguments.location.reload();
}else{
parent.opener.document.location.reload();
}
top.close();
}
兩種瀏覽器的打開(kāi)對(duì)話框的方式不一樣
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" );
關(guān)閉窗口時(shí):
IE: parent.dialogArguments.location.reload();
FireFox:parent.opener.document.location.reload();
還有一個(gè)很重要的注意點(diǎn)。FireFox好像不支持對(duì)話框的window.close();
所以最后使用的關(guān)閉窗口用的是 top.close(); 這個(gè)IE、FireFox都支持。
但是在實(shí)際操作的時(shí)候發(fā)生了一個(gè)問(wèn)題,IE的對(duì)話框技術(shù),對(duì)FireFox是不支持的,怎么才能做到既支持IE又支持FireFox的對(duì)話框呢?
還好,昨天在研究TinyMCE,里面有支持FireFox的對(duì)話框技術(shù)可以借鑒。
我寫的打開(kāi)對(duì)話框的方法:
function popupDialog(url,width,height){
//showx = event.screenX - event.offsetX - 4 - 10 ; // + deltaX; 這段代碼只對(duì)IE有效,已經(jīng)不用了
//showy = event.screenY - event.offsetY -168; // + deltaY; 這段代碼只對(duì)IE有效,已經(jīng)不用了
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();
}
}
在被打開(kāi)的對(duì)話框里,我是用了上下分Frame的頁(yè)面,因?yàn)樵?nbsp;IE里,對(duì)話框是不可以提交的,但是分成Frame后,就可以提交了。
在提交的按鈕上,加上這段代碼:
function doReload(){
var isMSIE= (navigator.appName == "Microsoft Internet Explorer");
if (isMSIE){
parent.dialogArguments.location.reload();
}else{
parent.opener.document.location.reload();
}
top.close();
}
兩種瀏覽器的打開(kāi)對(duì)話框的方式不一樣
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" );
關(guān)閉窗口時(shí):
IE: parent.dialogArguments.location.reload();
FireFox:parent.opener.document.location.reload();
還有一個(gè)很重要的注意點(diǎn)。FireFox好像不支持對(duì)話框的window.close();
所以最后使用的關(guān)閉窗口用的是 top.close(); 這個(gè)IE、FireFox都支持。
相關(guān)文章
asp生成不需要數(shù)據(jù)庫(kù)的中獎(jiǎng)碼
有一個(gè)思路是:將一批唯一中獎(jiǎng)碼,錄入的到數(shù)據(jù)庫(kù),中獎(jiǎng)時(shí),取出來(lái)一條,做一個(gè)標(biāo)記,把中獎(jiǎng)碼告訴2008-07-07asp HTTP 500錯(cuò)誤 常見(jiàn)問(wèn)題分析
這個(gè)問(wèn)題一般錯(cuò)誤不是很大,大家可以參考下面的步驟解決。2009-03-03關(guān)于ASP生成偽參數(shù)技巧 簡(jiǎn)潔實(shí)用的偽(僞)參數(shù)
關(guān)于ASP生成偽參數(shù)技巧 簡(jiǎn)潔實(shí)用的偽(僞)參數(shù)...2007-11-11非常不錯(cuò)的ASP+Access數(shù)據(jù)庫(kù)的終極安全大法18則
非常不錯(cuò)的ASP+Access數(shù)據(jù)庫(kù)的終極安全大法18則...2007-06-06