【IT168技术文档】
form最后的id=block的div用来屏蔽后面的内容<form id="Form1" runat="server" action="Index.aspx" method="post"> <div id="loginForm"> <table> <tr> <td> </td> <td> <input type="hidden" value="Login" name="Login" /> </td> </tr> <tr> <td> 用户名: </td> <td> <input name="userName" /> </td> </tr> <tr> <td> 密码: </td> <td> <input id="password" name="password" /> </td> </tr> <tr> <td> <input type="submit" value="登陆" /> </td> <td> <input type="reset" value="取消" onclick="Reset()" /> </td> </tr> </table> </div> <div id="block"> </div> </form>
CSS:
原理:/*登陆Form*/ #loginForm { border:solid 1px #AED5FD; position:absolute; top:35%; left:40%; z-index:2000; background-color:#EAF4FE; } /**//*屏蔽Div*/ #block { background-color:#CCCCCC; position:absolute; top:0px; left:0px; z-index:1000; display:block; width:100%; height:210%; /**//*设置屏蔽div的透明度*/ filter : progid:DXImageTransform.Microsoft.Alpha ( enabled=true , style=0 , opacity=40); } js: function ShowLogin() { var ele=document.getElementById("loginForm"); var block=document.getElementById("block"); ele.style.display=""; block.style.display=""; } function Reset() { document.getElementById("loginForm").style.display="none"; document.getElementById("block").style.display="none"; } window.onload=Reset();
加载页面开始时已经存在登陆div跟屏蔽div,只是设置为隐藏;点击登陆时调用showlogin(),将登陆显示并且用block挡住网页内容。取消登陆时再次屏蔽!