Hola a todos, ayer me decidí a hacer una ventana modal y me salio esto:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Insert title here</title>
<script type="text/javascript">
<!--
function toogle()
{
var params=toogle.arguments;
for(var i=1;i<params.length;i++)
{
document.getElementById(params[i]).style.display=params[0];
}
}
//-->
</script>
<style type="text/css">
html, body
{
height: 100%;
width: 100%;
margin: 0;
paddin: 0;
overflow: hidden;
}
#kba
{
height: 100%;
width: 100%;
overflow: auto;
}
#modal
{
position: absolute;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
z-index: 50;
filter: alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
background-color: #808080;
left: 0;
top: 0;
overflow: auto;
}
#mContainer
{
position: absolute;
left: 25%;
top: 25%;
background-color: #000000;
color: #ffffff;
width: 50%;
height: 50%;
z-index: 100;
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
</style>
</head>
<body>
<div id="kba">
<input type="button" id="open" value="fopen" onclick="toogle('block','modal','mContainer')"/>
asdsad
sad
sa
ds
ad
sad
sa
dsa
d<br />asdsad
sad
sa
ds
ad
sad
sa
dsa
d<br />asdsad
sad
sa
ds
ad
(aqui copias y pegas todo este churro para ver la barra de desplazamiento horizontal)
</div>
<div id="modal" style="display:none">
<div id="mContainer" style="display:none">
asdsaddsadasd
<input id="close" type="button" value="X" onclick="toogle('none','modal','mContainer')"/>
</div>
</div>
</body>
</html> No se si es el foro indicado pero bueno.
Lo he probado en IE6, IE7 portable y firefox y funciona en todas.
Si alguien tiene algun aporte que lo diga, espero que os guste.