Overlay 遮罩层 - 爱码网

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        img{padding: 5px;}
        #outer{width: 100%;height: 100%;}
        .overlay{background-color: #000;opacity: .7;filter:alpha(opacity=70);position: fixed;top:0;left: 0;width: 100%;height: 100%;z-index: 10;}
        .overlayimg{position: absolute;z-index: 11;left: 50px;top: 50px;}
    </style>

    <script type="text/javascript">
        function expandPhoto(){

            var overlay=document.createElement("div");
            overlay.setAttribute("id","overlay");
            overlay.setAttribute("class","overlay");
            document.body.appendChild(overlay);

            var img=document.createElement("img");
            img.setAttribute("id","img");
            img.src=this.getAttribute("data-larger");
            img.setAttribute("class","overlayimg");

            img.onclick=restore;

            document.body.appendChild(img);
        }


        function restore(){
            document.body.removeChild(document.getElementById("overlay"));
            document.body.removeChild(document.getElementById("img"));
        }

        window.onload=function(){
            var imgs=document.getElementsByTagName("img");
            console.log(imgs)
            imgs[0].focus();
            for(var i=0;i<imgs.length;i++){
                imgs[i].onclick=expandPhoto;
                imgs[i].onkeydown=expandPhoto;
            }
        }
    </script>
</head>
<body>
    <div id="outer">
        <img src="juhua.jpg" alt="" data-larger="juhua.jpg">
        <img src="kaola.jpg" alt="" data-larger="kaola.jpg">
    </div>

</body>
</html>