js+div+css 模拟弹出对话框_html/css_WEB-ITnose

今天闲着,做了这么一个网页,在IE5.5-8,ff下测试通过,共享给大家.

弹出模态对话框测试[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 >
    
    
            
                    
                         请输入用户名及密码 td >
                     tr >
                    
                         用户名 td >
                        
                            
                         td >
                         td >
                     tr >
                    
                         密码 td >
                        
                             td >
                         td >
                     tr >
                    
                         td >
                        
                               
                            
                             td >
                           td >
                     tr >
             table >
     div >

body >
html >