最近做一个双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>