我们先来看看效果如何，点击图片试一试。

图片的实际大小为1920x1080，我们先把宽度限制在300px，点击后图片还原到100%(如果浏览器窗口高度小于图片的真实高度，这样的情况下，图片虽然宽度还原到100%，但是所显示的大小依然取决于浏览器窗口的高度)，如果想要图片根据父框架的宽度进行放大，请点击这里：

http://www.dedecmsok.com/html/n171.html

css

#popup{

position: fixed;

left: 0px;

top: 0px;

width: 100%;

height: 100%;

text-align: center;

display: none;

z-index: 9999999;

}

#popup .bg{

background-color: rgba(0,0,0,0.5);

width: 100%;

height: 100%;

}

@media \0screen\,screen\9 {

#popup .bg{

background-color:#000000;

filter:Alpha(opacity=50);

position:static;

}

#popup .bg img{

position: relative;

}

}

#popup img{

margin-top: 2%;

max-height: 90%;

}

html

javascript

var imgs = document.getElementById("dedecmsok").getElementsByTagName("img");

var lens = imgs.length;

var popup = document.getElementById("popup");

for(var i = 0; i 

imgs[i].onclick = function (event){

event = event||window.event;

var target = document.elementFromPoint(event.clientX, event.clientY);

showBig(target.src);

}

}

popup.onclick = function (){

popup.style.display = "none";

}

function showBig(src){

popup.getElementsByTagName("img")[0].src = src;

popup.style.display = "block";

}