模态窗口，在IE下是模态，在FF下不是模态，作了最大的努力来实现通用

最新推荐文章于 2019-02-11 23:08:33 发布

最新推荐文章于 2019-02-11 23:08:33 发布 · 66 阅读

本文介绍了一种在不同浏览器中实现模态窗口的方法。针对IE和Firefox等浏览器的特性，提供了兼容性的解决方案，包括使用showModalDialog和window.open方法，并详细展示了如何调整弹窗的位置及大小。

代码源自网络，并自己整理吸收，调试通过

IE可以用showModalDialog方法打开模态窗口。

FF为了安全，执行方法window.open('openwin.html','newWin','modal=yes,width=200,height=200,resizable=no,scrollbars=no');

指定了modal=yes，打开的也不是模态窗口，是普通窗口

在IE下是模态，在FF下不是，作了最大的努力来实现通用，外观到是还可以。

打开对话框的方法如下：

function openModal()
{	
	popupDialog('child.html',200,200);
}
function showMsg(obj)
{
	alert(obj);
}
function popupDialog(url,width,height)
{      
	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();              
    }  
}

在被打开的对话框里，代码：

function doReload()
{    
	var isMSIE= (navigator.appName == "Microsoft Internet Explorer");  
    if (isMSIE)
	{  
		//IE
        //parent.dialogArguments.location.reload();  
		parent.dialogArguments.showMsg("345"); 
    }
	else
	{ 
		//FF
        //parent.opener.document.location.reload(); 
		window.opener.showMsg("345"); 
    }     
	//关闭窗口用的是 top.close();  这个IE、FireFox都支持。 
    //top.close(); 
	window.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" );

关闭窗口时：
window.close(); top.close(); 这个IE、FireFox都支持。