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

WBOY
Release: 2016-06-24 12:29:19
Original
1379 people have browsed it

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 >  
                    
            
    


 

 

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template