`

遮罩层 非原创

JavaScriptXHTMLHTML 
阅读更多
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
  5. <title>弹出提示</title>   
  6. <style>   
  7. * {margin:0;padding:0;font-size:12px;}   
  8. html,body {height:100%;width:100%;}  
  9. #content {background:#FFFFFF;padding:30px;height:100%;}  
  10. #content a {font-size:30px;color:#369;font-weight:700;}  
  11. #alert {border:1px solid #369;width:300px;height:150px;background:#e2ecf5;z-index:1000;position:absolute;display:none;}  
  12. #alert h4 {height:20px;background:#369;color:#fff;padding:5px 0 0 5px;}  
  13. #alert h4 span {float:left;}  
  14. #alert h4 span#close {margin-left:210px;font-weight:500;cursor:pointer;}  
  15. #alert p {padding:12px 0 0 30px;}  
  16. #alert p input {width:120px;margin-left:20px;}  
  17. #alert p input.myinp {border:1px solid #ccc;height:16px;}  
  18. #alert p input.sub {width:60px;margin-left:30px;}   
  19. </style>   
  20.   
  21. </head>   
  22.   
  23. <body>   
  24. <div id="content">   
  25. <a href="#">注册</a>   
  26. </div>   
  27. <div id="alert">   
  28. <h4><span>现在注册</span><span id="close">关闭</span></h4>   
  29. <p><label> 用户名</label><input type="text" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /></p>   
  30. <p><label> 密　码</label><input type="password" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /></p>   
  31. <p><input type="submit" value="注册" class="sub" /><input type="reset" value="重置" class="sub" /></p>   
  32. </div>   
  33. <script type="text/javascript">   
  34. var myAlert = document.getElementById("alert");   
  35. var reg = document.getElementById("content").getElementsByTagName("a")[0];   
  36. var mClose = document.getElementById("close");   
  37. reg.onclick = function()   
  38. {   
  39. myAlert.style.display = "block";   
  40. myAlert.style.position = "absolute";   
  41. myAlert.style.top = "50%";   
  42. myAlert.style.left = "50%";   
  43. myAlert.style.marginTop = "-75px";   
  44. myAlert.style.marginLeft = "-150px";   
  45.   
  46. mybg = document.createElement("div");   
  47. mybg.setAttribute("id","mybg");   
  48. mybg.style.background = "#000";   
  49. mybg.style.width = "100%";   
  50. mybg.style.height = "100%";   
  51. mybg.style.position = "absolute";   
  52. mybg.style.top = "0";   
  53. mybg.style.left = "0";   
  54. mybg.style.zIndex = "500";   
  55. mybg.style.opacity = "0.3";   
  56. mybg.style.filter = "Alpha(opacity=30)";   
  57. document.body.appendChild(mybg);   
  58.   
  59. document.body.style.overflow = "hidden";   
  60. }   
  61.   
  62. mClose.onclick = function()   
  63. {   
  64. myAlert.style.display = "none";   
  65. mybg.style.display = "none";   
  66. }   
  67. </script>   
  68. </body>   
  69. </html>  
分享到：
| tsql编程中需要注意的问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics