#html: ventana modal, visor de imagen o #Lightbox en #css sin #jquery by codepen.io

fuente: http://codepen.io/gschier/pen/HCoqh

muy sencillito y muy efectivo … quizas se echen en falta los botones de alante y atras y los efectillos de aparicion pero es muy resulton y poco pesado y muy bueno para evitar engorrosos conflictos de jquery por sus liberias

en el css:

.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}

.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 200%;
}

.lightbox:target {
outline: none;
display: block;
}

en el html:

link visible
<a href=”#img1″>
<img src=”https://s3.amazonaws.com/gschierBlog/images/pig-small.jpg”&gt;
</a>

link oculto debido a que sera la imagen en grande que se vera despues de pulsar
<a href=”#_” class=”lightbox” id=”img1″>
<img src=”https://s3.amazonaws.com/gschierBlog/images/pig-big.jpg”&gt;
</a>

javascript y html : abrir una ventana nueva tipo window.open centrada vertical y horizontalmente multiplataforma excepto para el dichoso explorer que centra horizontal pero no verticalmente

# Codigo ofrecido por Tutores.org

function obtener_ancho()
{
if (navigator.userAgent.indexOf(“MSIE”) > 0)
{
return(document.body.clientWidth);
}
else
{
return window.outerWidth;
}
}
function obtener_alto()
{
if (navigator.userAgent.indexOf(“MSIE”) > 0)
{
return(document.body.clientHeight);
}
else
{
return(window.outerHeight);
}
}
var popup = new Object()
function CenterPopup(URL, width, height)
{
var X = obtener_ancho() / 2
var Y = obtener_alto() / 2
popup = window.open(URL, ‘PopUp’,
‘scrollbars=yes ‘ +
‘width=’ + width + ‘ ‘ +
‘height=’ + height + ‘ ‘ +
‘top=’ + (window.screenTop + (Y – (height/2))) + ‘ ‘ +
‘left=’ + (window.screenLeft + (X – (width/2)))
)
popup.focus()
}

y a continuacion en el enlace href añadimos onclick=”CenterPopup(‘http://www.tutores.org/&#8217;, 640, 480);return(false);”