js div css simulates pop-up dialog box_html/css_WEB-ITnose

I have some free time today and made such a web page. It passed the test under IE5.5-8 and ff. I would like to share it with everyone.

< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" />
< title > 弹出模态对话框测试[IE6下测试通过]

< style  type ="text/css" >
    .hideDlg
     {
        height : 129px ; width : 368px ;
        display : none ;
     }
    .showDlg
     {
        background-color : #ffffdd ;
        border-width : 3px ;
        border-style : solid ;
        height : 129px ; width : 368px ;
        position :  absolute ;  
        display : block ;
        z-index : 5 ;
     }
    .showDeck  {
        display : block ;
        top : 0px ;
        left : 0px ;
        margin : 0px ;
        padding : 0px ;
        width : 100% ;
        height : 100% ;
        position : absolute ;
        z-index : 3 ;
        background : #cccccc ;
     }
    .hideDeck 
     {
        display : none ;
     }


< script  type ="text/javascript" >
     function  showDlg()
    {
         // 显示遮盖的层
         var  objDeck  =  document.getElementById( " deck " );
         if ( ! objDeck)
        {
            objDeck  =  document.createElement( " div " );
            objDeck.id = " deck " ;
            document.body.appendChild(objDeck);
        }
        objDeck.className = " showDeck " ;
        objDeck.style.filter = " alpha(opacity=50) " ;
        objDeck.style.opacity = 40 / 100;
        objDeck.style.MozOpacity = 40 / 100;
         // 显示遮盖的层end
        
         // 禁用select
        hideOrShowSelect( true );
        
         // 改变样式
        document.getElementById( ' divBox ' ).className = ' showDlg ' ;
        
         // 调整位置至居中
        adjustLocation();
        
    }
    
     function  cancel()
    {
        document.getElementById( ' divBox ' ).className = ' hideDlg ' ;
        document.getElementById( " deck " ).className = " hideDeck " ;
        hideOrShowSelect( false );
    }
    
     function  hideOrShowSelect(v)
    {
         var  allselect  =  document.getElementsByTagName( " select " );
         for  ( var  i = 0 ; i < allselect.length; i )
        {
             // allselect[i].style.visibility = (v==true)?"hidden":"visible";
            allselect[i].disabled  = (v == true ) ? " disabled " : "" ;
        }
    }
    
     function  adjustLocation()
    {
         var  obox = document.getElementById( ' divBox ' );
         if  (obox  != null   &&  obox.style.display  != " none " )
        {
             var  w = 368 ;
             var  h = 129 ;
             var  oLeft,oTop;
            
             if  (window.innerWidth)
            {
                oLeft = window.pageXOffset (window.innerWidth - w) / 2  "px";
                oTop = window.pageYOffset (window.innerHeight - h) / 2  "px";
            }
             else
            {
                 var  dde = document.documentElement;
                oLeft = dde.scrollLeft (dde.offsetWidth - w) / 2  "px";
                oTop = dde.scrollTop (dde.offsetHeight - h) / 2  "px";
            }
            
            obox.style.left = oLeft;
            obox.style.top = oTop;
        }
    }
    




< body  onresize ="adjustLocation();" >
     < input  type ="button"  value ="click me"  onclick ="showDlg();"  size ="10px"   />< br />
     < input  type ="text"  value =""  size ="10px"   />< a  href ="http://www.baidu.com"  target ="_blank" > 百度 < br />
     < select >
         < option  selected ="selected" > 1
         < option > 2
< br />
                                                                                                          ="height:100%; width: 100%;" id ="table1" >
                                                                center;" colspan = "3" > Please enter username and password
                                                < td > Username
                                                                                              ​                                                                               < ;/ td >
                                            lt;/ td >
                                                                 input name ="TextBox2" type ="text" id ="TextBox2" /> lt;/ tr >
                                                                                            🎜>                                                                                                                                                                                                                      ​ ="Button1" size ="10" onclick ="alert(TextBox1.value)" />   
                             < input  type ="button"  name ="Button2"  value ="Cancel"  id ="Button2"  size ="10"  onclick ="cancel();"   />
                            
                         < td >