求一个类似百度登录那种弹出式登陆框例子

百度的那个源代码看不大懂,谁给个简单的例子

解决方案 »

  1.   


    <html>
    <head>
    <title>LIGHTBOX EXAMPLE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
      .black_overlay{
         display: none; 
     position: absolute;  
     top: 0%;  
     left: 0%;  
     width: 100%;  
     height: 100%;  
     background-color: black;  
     z-index:1001;  
     -moz-opacity: 0.8;  
     opacity:.80;  
     filter: alpha(opacity=80);  
    } 
    .white_content {
    display: none;  
    position: absolute; 
    top: 25%; 
    left: 25%; 
    width: 25%; 
    height: 25%; 
    padding: 16px;
    border: 2px solid orange; 
    background-color: white; 
    z-index:1002;
    overflow: auto;
    }  
    </style>
    <script language="javascript">
    function openWindow(){
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block';
    }
    function closeWindow(){
    document.getElementById('light').style.display='none';
    document.getElementById('fade').style.display='none';
    }
    </script></head>
    <body>

    <p>可以根据自己要求修改css样式
    <input type="button" value="点击这里打开窗口" onclick="openWindow()"/></p>
    </body>
    <div id="light" class="white_content">
     This is the lightbox content.
     <a href="#" onClick="closeWindow()"> Close</a></div>
    <div id="fade" class="black_overlay"></div>

    </html>