showModalDialog sólo funciona en Explorer. Yo simularía el comportamiento, con la ayuda de un iframe, de la siguiente manera:
página principal:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>principal</title>
<script>
function $(id){
return document.getElementById(id);
}
function addEvent(obj, evType, fn, useCapture){
if (obj.addEventListener){
obj.addEventListener(evType, fn, useCapture);
} else if (obj.attachEvent){
obj.attachEvent("on"+evType, fn);
} else {
obj['on'+evType]=fn;
}
}
function set_opacity(div, val) {
if (div.filters) { //For IE
val *= 100;
try {
div.filters.item("DXImageTransform.Microsoft.Alpha").opacity = val;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
div.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+val+')';
}
} else {
div.style.opacity = val;
div.style.MozOpacity = val; //This is for older Mozilla Browsers
}
}
function getWindowData(){
var cw,widthViewport,ch,heightViewport,xScroll,yScroll,widthTotal,heightTotal;
if (typeof window.innerWidth != 'undefined')
{
widthViewport= window.innerWidth;
heightViewport= window.innerHeight;
}
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
widthViewport=document.documentElement.clientWidth;
heightViewport=document.documentElement.clientHeight;
}
else {
widthViewport= document.getElementsByTagName('body')[0].clientWidth;
heightViewport=document.getElementsByTagName('body')[0].clientHeight;
}
xScroll=self.pageXOffset || (document.documentElement.scrollLeft+document.body.scrollLeft);
yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop);
widthTotal=Math.max(document.documentElement.scrollWidth,document.body.scrollWidth,widthViewport);
heightTotal=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,heightViewport);
return [cw,widthViewport,ch,heightViewport,xScroll,yScroll,widthTotal,heightTotal];
}
popup=false;
function alargar(){
var pagina=getWindowData();
if(!$('overlay')){
ov=document.createElement('div');
ov.id='overlay';
ov.style.zIndex='90';
ov.style.backgroundColor='black';
try{set_opacity(ov, 0.5);}catch(e){}
document.getElementsByTagName('body')[0].appendChild(ov);
set_opacity($('overlay'), 0.5);
}
document.getElementById('overlay').style.position='absolute';
document.getElementById('overlay').style.height=pagina[7]+'px';
document.getElementById('overlay').style.width='100%';
document.getElementById('overlay').style.top=document.getElementById('overlay').style.left=0;
}
function recargar()
{
alert("Recargó");
}
function ventana(){
popup=true;
var pagina=getWindowData();
$('qq').style.top=((pagina[3]-400)/2)+pagina[5]+'px';
$('qq').style.left=(pagina[1]/2)-250+'px';
$('qq').style.zIndex='100';
alargar();
}
function cerrar(){
popup=false;
$('qq').style.top='-500px';
$('qq').style.left='-500px';
$('qq').style.zIndex='10';
document.getElementsByTagName('body')[0].removeChild($('overlay'));
}
window.onresize=function(){if(popup){ventana();}}
window.onload=function(){
addEvent($('pp'), 'click', ventana, false);
}
</script>
<style type="text/css">
<!--
#pp {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #999999;
text-decoration:underline;
cursor:pointer;
}
#qq {
position:absolute;
left:-500px;
top:-500px;
}
-->
</style>
</head>
<body>
<span id="pp">Abrir</span><br /><br />
<br />
<div id="qq"><iframe src="pop.php" scrolling="no" width="500" height="400" frameborder="0"></iframe></div>
</body>
</html>
Página secundaria (en el ejemplo: pop.php):
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>popup</title>
<script>
function $(id){
return document.getElementById(id);
}
function addEvent(obj, evType, fn, useCapture){
if (obj.addEventListener){
obj.addEventListener(evType, fn, useCapture);
} else if (obj.attachEvent){
obj.attachEvent("on"+evType, fn);
} else {
obj['on'+evType]=fn;
}
}
function pasadatos()
{
$("nit").value =datos.Nit;
$("nombre").value =datos.Nombre;
window.parent.recargar();
window.parent.cerrar();
}
var datos={Nit:'algo',Nombre:'otracosa'};
window.onload=function(){
addEvent($('cerrar'), 'click', pasadatos, false);
}
</script>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
-->
</style></head>
<body>
<form id="form1" name="form1" method="post" action="">
<div align="center">
<input name="nit" type="text" id="nit" />
<input name="nombre" type="text" id="nombre" />
<input id="cerrar" type="button" name="Submit" value="cerrar" />
</div>
</form>
</body>
</html>