<html>
<head>
<title>点击图片弹出层放大图片</title>
    <script type="text/javascript">
        var BigImgUrl;
        function BackFullScreen(BigImgUrl) {
            var FullScreenDiv = document.getElementById("FullScreenDiv");
            FullScreenDiv.style.width = document.body.clientWidth + "px";
            FullScreenDiv.style.height = document.body.clientHeight + "px";
            FullScreenDiv.style.display = "block";
            
            var ShowBigImgDiv = document.getElementById("ShowBigImgDiv");
            var ShowBigImgDivPosition;
            ShowBigImgDiv.style.display = "block";
            ShowBigImgDiv.innerHTML = "<img src=\"" + BigImgUrl + "\" border=\"0\" />";
            ShowBigImgDivPosition = document.documentElement.scrollTop;
            if (ShowBigImgDivPosition == 0 || ShowBigImgDivPosition == "") {
                ShowBigImgDivPosition = document.body.scrollTop;
            }
            ShowBigImgDiv.style.top = ShowBigImgDivPosition + ((window.screen.height - ShowBigImgDiv.clientHeight) / 2 - 170) + "px";
            ShowBigImgDiv.style.left = (window.screen.width - ShowBigImgDiv.clientWidth) / 2 - 90 + "px";
        }
        function BackFullScreenHidde() {
            document.getElementById("ShowBigImgDiv").style.display = "none";
            document.getElementById("FullScreenDiv").style.display = "none";
        }
    </script>
    <style type="text/css">
        #ShowBigImgDiv
        {
            position: absolute;
            z-index: 10001;
            display: none;
            cursor: pointer;
        }
        #FullScreenDiv
        {
            position: absolute;
            z-index: 10000;
            display: none;
            background-color: #FFFFFF;
            filter: alpha(opacity=50);
            opacity: 0.5;
            cursor: pointer;
        }
    </style>
</head>

<body>
<img id="pic" src="p_w_picpaths/naruto.jpg" style="width: 130px; height: 160px;" onclick="BackFullScreen(this.src)" alt="点击图片放大" />
<div id="ShowBigImgDiv" onclick="BackFullScreenHidde()" title="点击缩小"></div>
<div id="FullScreenDiv" onclick="BackFullScreenHidde()" title="点击缩小"></div>
</body>
</html>