Div锁屏

最新推荐文章于 2022-06-10 12:53:50 发布

gundumw100

最新推荐文章于 2022-06-10 12:53:50 发布

阅读量269

点赞数

分类专栏： XHTML HTML

本文链接：https://blog.csdn.net/gundumw100/article/details/69952323

版权

HTML 同时被 2 个专栏收录

77 篇文章 0 订阅

订阅专栏

XHTML

21 篇文章 0 订阅

订阅专栏


   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>Demo</title>  
   6. <style type="text/css">  
   7.   
   8. *{  
   9.    margin:0;  
  10.    padding:0;  
  11. }  
  12. html,body{  
  13.    height:100%;  
  14. }  
  15. #shadow{  
  16.    position:absolute;　  
  17.    left:0;  
  18.    top:0;  
  19.    width:100%;  
  20.    height:100%;  
  21.    background-color:#0060C0;  
  22.    filter:alpha(opacity=20);  
  23. }  
  24. #box{  
  25.    position:absolute;  
  26.    left:50%;  
  27.    top:50%;  
  28.    width:400px;  
  29.    height:180px;  
  30.    margin:-90px 0 0 -200px;  
  31.    border:1px solid #84A0C4;  
  32.    background-color:#DFE8F6;  
  33.    text-align:center;  
  34. }  
  35.   
  36. </style>  
  37. <script language="javascript" type="text/javascript">  
  38.   
  39. function createDiv()  
  40. {  
  41.     var btnShow = document.getElementById("btnshow");  
  42.     btnShow.disabled=true;  
  43.   
  44.     var shadow = document.createElement("div");  
  45.     shadow.setAttribute("id","shadow");  
  46.     shadow.style.zIndex="10";  
  47.   
  48.     var box=document.createElement("div");  
  49.     box.setAttribute("id","box");  
  50.     box.style.zIndex="999";  
  51.       
  52.     var spanUser=document.createElement("span");  
  53.     spanUser.innerHTML="User:";  
  54.   
  55.     var textUser=document.createElement("input");  
  56.     textUser.setAttribute("type","text");  
  57.     textUser.setAttribute("id","textUser");  
  58.   
  59.     var button=document.createElement("input");  
  60.     button.setAttribute("type","button");  
  61.     button.setAttribute("id","button1");  
  62.     button.setAttribute("value","Confirm");  
  63.     button.οnclick=hideDiv;  
  64.   
  65.     box.appendChild(spanUser);  
  66.     box.appendChild(textUser);  
  67.     box.appendChild(button);  
  68.   
  69.     document.body.appendChild(shadow);  
  70.     document.body.appendChild(box);  
  71. }  
  72. function hideDiv()  
  73. {  
  74.     var textUser=document.getElementById("textUser");  
  75.     var user=document.getElementById("user");  
  76.     user.value=textUser.value;  
  77.   
  78.     var box=document.getElementById("box");  
  79.     var shadow=document.getElementById("shadow");  
  80.     var btnShow=document.getElementById("btnShow");  
  81.       
  82.     document.body.removeChild(box);  
  83.     document.body.removeChild(shadow);  
  84.     btnShow.disabled=false;     
  85. }  
  86.   
  87. </script>  
  88. </head>  
  89. <body>  
  90. <div style="text-align:center">  
  91. <input id="user" type="text" />  
  92. <input id="btnshow" type="button" οnclick="createDiv()" value="Display" />  
  93. </div>  
  94. </body>  
  95. </html>