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.

弹出模态对话框测试[IE6下测试通过] title >


    .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 ;
     }
style >


     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[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;
        }
    }
    
script >

head >


    
     百度 a >
    
         1 option >
         2 option >
select >
                                                                                                          ="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" /> td > lt;/ tr >
                                                                                            🎜>                                                                                                                                                                                                                      ​ ="Button1" size ="10" onclick ="alert(TextBox1.value)" />   
                            
                             td >
                           td >
                     tr >
             table >
     div >

body >
html >