我们先来看看效果如何，点击图片试一试。
图片的实际大小为1920x1080，我们先把宽度限制在300px，点击后图片还原到100%（如果浏览器窗口高度小于图片的真实高度，这样的情况下，图片虽然宽度还原到100%，但是所显示的大小依然取决于浏览器窗口的高度），如果想要图片根据父框架的宽度进行放大，请点击这里：
http://www.dedecmsok.com/html/n171.html

css

    <style>
        #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%;
        }
    </style>

html

<div id="dedecmsok">
    <img src="111.jpg" />
    <img src="222.jpg" />
</div>
<div id="popup">
  <div class="bg">
    <img src=""/>
  </div>
</div>

javascript

<script type="text/javascript">
    var imgs = document.getElementById("dedecmsok").getElementsByTagName("img");
    var lens = imgs.length;
    var popup = document.getElementById("popup");

    for(var i = 0; i < lens; 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";
    }
</script>