Hola amigos:
He estado intentando hacer un lightbox con css puro, encontre este ejemplo pero surge un problema, si no tengo scroll hacia abajo con contenido en la ventana el lightbox funciona genial queda centrado y opaca con el css creado, pero si tengo contenido q force al scroll del navegador el lightbox se ejecuta pero solo en la parte superior de la ventana.
Código HTML:
<html>
<head>
<script language="javascript" type="application/javascript">
function showLightbox(valor) {
document.getElementById(valor).style.display='block';
document.getElementById('fade').style.display='block';
}
function hideLightbox(value) {
document.getElementById(value).style.display='none';
document.getElementById('fade').style.display='none';
}
<style type="text/css">
.fadebox {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:500;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.overbox {
display: none;
position: absolute;
left: 10%;
width: 75%;
height: 75%;
z-index: 1002;
overflow: auto;
bottom: 10%;
}
#content {
background: #FFFFFF;
border: solid 5px #CCCCCC;
padding: 10px;
}
</style>
</head>
<body>
<a href="javascript:void()" onClick="showLightbox('over');">Show LightBox</a>
<div id="over" class="overbox">
<div id="content">
Ventana creada con CSS<br />
como ejemplo de <strong>Lightbox</strong>.<br /><br />
hola mundo
<a href="#footlight" onClick="hideLightbox('over');">Hide LightBox</a>
</div>
</div>
<div id="fade" class="fadebox"> </div>
</body>
</html> No se si se pude adaptar para que se posicione en cualquier parte de la ventana?
muchas gracias de antemano por la ayuda