代码改变世界

div遮盖层

2011-09-20 18:27  Carl Xing  阅读(1018)  评论(0)  编辑  收藏  举报 
<html>
<head>
    <title></title>
       <script type="text/javascript">
           function show() {
               document.getElementById("mask").style.display = "";
               document.getElementById("content1").style.display = "";
               document.getElementById("mask").style.filter = "Alpha(Opacity=10)";//透明度
               document.getElementById("content1").innerHTML = "你的内容<input onclick='hide()' type='button' value='确定'/>";
           }
           function hide() {
               document.getElementById("mask").style.display = "none";
               document.getElementById("content1").style.display = "none";
           }
    </script>
</head>
<body>
<div style="width: 100%; background-color:Gray; display:none; height: 100%; position:absolute;left:0px;top:0px;"  id="mask"></div>
<div style="width: 260px; background-color:Blue; display:none; height: 113px; position:absolute; left: 244px; top: 137px;" id="content1"></div>
<div id="fuck">
<input onclick="show()" type="button" value="显示"/>
</div>
<script type="text/javascript">
        function ScrollDiv() {
            document.getElementById("mask").style.top = document.body.scrollTop+ "px";
            document.getElementById("mask").style.left = (document.body.scrollLeft) + "px";
        }
        window.onscroll = ScrollDiv;
        window.onresize = ScrollDiv;
        //window.onload = ScrollDiv;如果是ajax中用这个会出现问题。
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>