最近做一个双11活动的,是一套相关的H5页面。本来以为难度不大,但是做下来几天还是遇到些问题。就总结一下吧,还是有收获的。

1.在H5页面中,有一个遮罩层,还是挺有意思的。直接用div+css控制遮罩层页面。

 

<!DOCTYPE html >
<head>
<title>DIV CSS遮罩层</title>
<script language="javascript" type="text/javascript">
function showdiv() {            
            document.getElementById("bg").style.display ="block";
            document.getElementById("show").style.display ="block";
        }
function hidediv() {
            document.getElementById("bg").style.display ='none';
            document.getElementById("show").style.display ='none';
        }
</script>
<style type="text/css">
        #bg{ display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.7;  opacity:.70;  filter: alpha(opacity=70);}
        #show{display: none;  position: absolute;  top: 25%;  left: 22%;  width: 53%;  height: 49%;  padding: 8px;  border: 8px solid #E8E9F7;  background-color: white;  z-index:1002;  overflow: auto;}
</style>
</head>
<body>
<input />
<div ></div>
<div >测试
<input />
</div>
</body>
</html>
View Code

相关文章: