div+css模仿登录界面

我的代码，这种方式形成了遮罩层，遮罩层的"登录"按钮仍可被点击，非我想要的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遮罩画面</title>
<script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8" async defer></script>


<style type="text/css" media="screen">
     .mask{
        position: absolute;
        background-color:#3B1AEB;
        font-size:15px;
        border-width:2px;
        border-style:solid;
        border-color:#1DC4E3; 
        z-index:10;
        margin-left:100px;
     }   
    
    .login{
        position: absolute;
        filter:alpha(opacity=50); /*支持 IE 浏览器*/
        -moz-opacity:0.50; /*支持 FireFox 浏览器*/
        opacity:0.50; /*支持 Chrome, Opera, Safari 等浏览器*/
        /*display: none;*/
        z-index:2;
    }
</style>
 
<script type="text/javascript">
     function login()
     {
        
        $("#login_input").css("display","block");
        // $("#login").css("display","none");
        $("#login").addClass('login');

     }

 function clickSubmit()
 {
    $("#login_input").css("display","none");
        // $("#login").css("display","none");
     $("#login").removeClass('login');
 }

    
</script>


</head>


<body>
 <div id="login">
    
     <a href="#"  onclick="javascript:login()">登录</a>
 </div>        
    
    <div id="login_input" class="mask" style="display: none">
       <label>用户名:<input type="text" name="user" value="h65"></label>
       <label>密码：<input type="text" name="" value=""></label>
       <label><input type="checkbox" name="" value="">remember me</label>
       <p >
          <input type="submit" name="" value="确定" onclick="clickSubmit()">
       </p>
    </div>
    

</body>
</html>

效果图：

     

网友提供的代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3  <head>
 4   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5   <title>Jquery遮罩层</title>
 6   
 7   <style type="text/css">      
 8       #BgDiv{background-color:#e3e3e3; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
 9       
10       #DialogDiv{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
11       #DialogDiv h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
12       #DialogDiv h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
13       #DialogDiv .form{padding:10px;}
14       
15     
16   </style>
17   
18   <script language="javascript" type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
19   <script language="javascript" type="text/javascript">
20    function ShowDIV(thisObjID) {
21           $("#BgDiv").css({ display: "block", height: $(document).height() });
22           var yscroll = document.documentElement.scrollTop;
23           $("#" + thisObjID ).css("top", "100px");
24           $("#" + thisObjID ).css("display", "block");
25     document.documentElement.scrollTop = 0;
26       }
27 
28       function closeDiv(thisObjID) {
29           $("#BgDiv").css("display", "none");
30           $("#" + thisObjID).css("display", "none");
31       }
32  </script>
33   
34  </head>
35  
36  <body>
37   <div id="BgDiv"></div>
38   
39   <!--遮罩层显示的DIV1-->
40   <div id="DialogDiv" style="display:none">
41     <h2>弹出层<a href="#" id="btnClose" onclick="closeDiv('DialogDiv')">关闭</a></h2>
42    <div class="form">  <div id="login_input" class="mask" >
43        <label>用户名:<input type="text" name="user" value="h65"></label>
44        <label>密码：<input type="text" name="" value=""></label>
45        <label><input type="checkbox" name="" value="">remember me</label>
46        <p >
47           <input type="submit" name="" value="确定" onclick="clickSubmit()">
48        </p>
49     </div></div>
50   </div>
51   
52   
53   <p>
54    <input value="弹出遮罩层1" type="button" id="btnShow1" onclick="ShowDIV('DialogDiv')" /> 
55   </p>
56  </body>
57 </html>

效果图：

  

遮罩层的按钮完全被屏蔽了。点击不了。

个人分析：需要独立的背景层，进行分隔底层与顶层页面。

 

posted @ 2015-06-02 21:24  cogitoergosum  阅读(1605)  评论(0)  编辑  收藏  举报