`

Div锁屏

    博客分类：
  • js
JavaScriptXHTMLCSSHTML 
阅读更多

<!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=gb2312" />    
 <title>Demo</title>    
 <style type="text/css">    
     
 *{    
    margin:0;    
    padding:0;    
 }    
 html,body{    
    height:100%;    
 }    
 #shadow{    
    position:absolute;　    
    left:0;    
    top:0;    
    width:100%;    
    height:100%;    
    background-color:#0060C0;    
    filter:alpha(opacity=20);    
 }    
 #box{    
    position:absolute;    
    left:50%;    
    top:50%;    
    width:400px;    
    height:180px;    
    margin:-90px 0 0 -200px;    
    border:1px solid #84A0C4;    
    background-color:#DFE8F6;    
    text-align:center;    
 }    
     
 </style>    
 <script language="javascript" type="text/javascript">    
     
 function createDiv()    
 {    
     var btnShow = document.getElementById("btnshow");    
     btnShow.disabled=true;    
     
     var shadow = document.createElement("div");    
     shadow.setAttribute("id","shadow");    
     shadow.style.zIndex="10";    
     
     var box=document.createElement("div");    
     box.setAttribute("id","box");    
     box.style.zIndex="999";    
         
     var spanUser=document.createElement("span");    
     spanUser.innerHTML="User:";    
     
     var textUser=document.createElement("input");    
     textUser.setAttribute("type","text");    
     textUser.setAttribute("id","textUser");    
     
     var button=document.createElement("input");    
     button.setAttribute("type","button");    
     button.setAttribute("id","button1");    
     button.setAttribute("value","Confirm");    
     button.onclick=hideDiv;    
     
     box.appendChild(spanUser);    
     box.appendChild(textUser);    
     box.appendChild(button);    
     
     document.body.appendChild(shadow);    
     document.body.appendChild(box);    
 }    
 function hideDiv()    
 {    
     var textUser=document.getElementById("textUser");    
     var user=document.getElementById("user");    
     user.value=textUser.value;    
     
     var box=document.getElementById("box");    
     var shadow=document.getElementById("shadow");    
     var btnShow=document.getElementById("btnShow");    
         
     document.body.removeChild(box);    
     document.body.removeChild(shadow);    
     btnShow.disabled=false;       
 }    
     
 </script>    
 </head>    
 <body>    
 <div style="text-align:center">    
 <input id="user" type="text" />    
 <input id="btnshow" type="button" onclick="createDiv()" value="Display" />    
 </div>    
 </body>

分享到：
| 误删资料恢复
评论
发表评论

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

相关推荐

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