When designing the dialog flow of FireFox, you plan to use pop-up dialog boxes to add pages and modify pages. When the addition and modification are finished, click Submit the dialog box to close, and then refresh the list window. Below is the editor of the Wrong New Technology Channel to teach you how to write a suitable FireFox dialog box. Let's go to the following article to learn more!
However, a problem occurred during actual operation. IE's dialog box technology does not support FireFox. How can we achieve a dialog box that supports both IE and FireFox?
Fortunately, I was studying TinyMCE yesterday, and there are dialog boxes that support FireFox to learn from.
I wrote the method to open the dialog box:
function popupDialog(url,width,height){
//showx = event.screenX - event.offsetX - 4 - 10 ; // + deltaX; This code is only valid for IE and is no longer used
//showy = event.screenY - event.offsetY -168; // + deltaY; This code is only valid for IE and is no longer used
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"); //Judge browser
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();
}
}
In the dialog box that is opened, I used the page of the upper and lower division of Frames, because in IE, the dialog box cannot be submitted, but after it is divided into Frames, it can be submitted.
On the submitted button, add this code:
function doReload(){
var isMSIE= (navigator.appName == "Microsoft Internet Explorer");
if (isMSIE){
parent.dialogArguments.location.reload();
}else{
parent.opener.document.location.reload();
}
top.close();
}
The way the two browsers open dialog boxes is different
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" );
When closing the window:
IE: parent.dialogArguments.location.reload();
FireFox: parent.opener.document.location.reload();
There is another very important point to pay attention to. FireFox does not seem to support window.close() of dialog boxes;
Therefore, the last use of the close window is top.close(); both IE and FireFox support.
The above is a dialog box that teaches you how to write a suitable FireFox. For more content, please continue to pay attention to other related articles on the Wrong New Technology Channel!