遮盖层实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><style>#div1{background:pink;width:600px;height:200px;margin:100px 200px;padding:100px;z-index:100;display:none;position:absolute;}#div2{width:100%;height:100%;background:blue;z-index:50;opacity:0.2;display:none;position:absolute;top:0px;left:0px;}</style><script>function use(){var use=document.getElementById("user").value;var reg=/^\D/;if(reg.test(use)){document.getElementById("span1").innerHTML="地址格式正确";document.getElementById("user").style.borderColor="green";return true;}else{document.getElementById("span1").innerHTML="地址格式错误";document.getElementById("user").style.borderColor="red";return false;}}function emai(){var email=document.getElementById("email").value;var reg=/^\w*@\w*.\w*$/;if(reg.test(email)){document.getElementById("span2").innerHTML="邮箱格式正确";document.getElementById("email").style.borderColor="green";return true;}else{document.getElementById("span2").innerHTML="邮箱格式错误";document.getElementById("email").style.borderColor="red";return false;}}function loads(){if(use()&&emai()){return true;}else{alert("提交失败");return false;}}function show(){document.getElementById("div1").style.display="block";document.getElementById("div2").style.display="block";}function showBack(){document.getElementById("div1").style.display="none";document.getElementById("div2").style.display="none";}</script><body><input type="button" onclick="show()" value="注册" /><div id="div1"><form action="ojbk.html" method="get" ><table><tr><td>地址</td><td><input type="text" id="user" onblur="use()" /></td><td><span id="span1"></span></td></tr><tr><td>邮箱</td><td><input type="text" id="email" onblur="emai()" /></td><td><span id="span2"></span></td></tr><tr><td colspan="3"><input type="submit" value="提交" onclick="loads()" /></td></tr><tr><td colspan="3"><input type="button" value="返回" onclick="showBack()" /></td></tr></table></form></div><div id="div2"></div></body></html>
评论