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

<!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>

效果图：

网友提供的代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

   <title>Jquery遮罩层</title>

   <style type="text/css">

       #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;}

       #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;}

       #DialogDiv h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}

       #DialogDiv h2 a{position:absolute; right:5px; font-size:12px; color:#000000}

       #DialogDiv .form{padding:10px;}

   </style>

   <script language="javascript" type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>

   <script language="javascript" type="text/javascript">

    function ShowDIV(thisObjID) {

           $("#BgDiv").css({ display: "block", height: $(document).height() });

           var yscroll = document.documentElement.scrollTop;

           $("#" + thisObjID ).css("top", "100px");

           $("#" + thisObjID ).css("display", "block");

     document.documentElement.scrollTop = 0;

       }

       function closeDiv(thisObjID) {

           $("#BgDiv").css("display", "none");

           $("#" + thisObjID).css("display", "none");

       }

  </script>

  </head>

  <body>

   <div id="BgDiv"></div>

   <!--遮罩层显示的DIV1-->

   <div id="DialogDiv" style="display:none">

     <h2>弹出层<a href="#" id="btnClose" onclick="closeDiv('DialogDiv')">关闭</a></h2>

    <div class="form">  <div id="login_input" class="mask" >

        <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></div>

   </div>

   <p>

    <input value="弹出遮罩层1" type="button" id="btnShow1" onclick="ShowDIV('DialogDiv')" />

   </p>

  </body>

 </html>

效果图：

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

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

div+css模仿登录界面的更多相关文章

  1. HTML+CSS系列:登录界面实现

    一.效果 二.具体实现 1.index.html <!DOCTYPE html> <html> <head> <meta charset="utf- ...

  2. html+css实现登录界面

    <!DOCTYPE html> <style type="text/css"> body{ background-color: #555555; } #ti ...

  3. CSS样式案例(2)-制作一个简单的登录界面

    首先来张完工的效果图. 一.html文件如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  4. 运用HTML5+CSS3和CSS滤镜做的精美的登录界面

    原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...

  5. iOS开发UI篇—模仿ipad版QQ空间登录界面

    iOS开发UI篇—模仿ipad版QQ空间登录界面 一.实现和步骤 1.一般ipad项目在命名的时候可以加一个HD,标明为高清版 2.设置项目的文件结构,分为home和login两个部分 3.登陆界面的 ...

  6. 界面编程模仿篇(QQ登录界面逼真篇)

    写了好多天的爬虫,偷空前前后后用了两天的时间(排除吃饭睡觉)写完了这个QQ登录界面,看起来还凑和着吧,如果是的大神的,莫见笑,纯属业余作品,废话先不多说,截图如下,其中第二幅图片中的红色方框部份有待完 ...

  7. [转]Android：布局实例之模仿QQ登录界面

    Android:布局实例之模仿QQ登录界面 预览图: 准备: 1.找到模仿对象 QQ登陆界面UI下载>>>>> 2.导入工程 3.查看布局结构和使用控件 其对应效果图分布 ...

  8. Android：布局实例之模仿QQ登录界面

    预览图: 准备: 1.找到模仿对象 QQ登陆界面UI下载>>>>> 2.导入工程 3.查看布局结构和使用控件 其对应效果图分布为 4.分析样式选择器 下拉箭头2种样式:点 ...

  9. Android：布局实例之模仿京东登录界面

    预览图及布局结构参考: 布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout ...

随机推荐

  1. JS, Node.js, npm简介

    序 听过JS,听过Node,也听过Node.js,还听过npm,然而并不是很清楚的知道都代表什么,这两天调接口,然后前端同学很忙,就自己把前端代码拿过来跑了,也趁机了解一下这几个概念,下边做个小的总结 ...

  2. Code笔记之：CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

  3. 05.K米评测

    体验产品:K米Android版本 软件版本:4.3.0 设备型号:魅蓝note2 操作系统: Android5.1 体验时间:2016.10.15-2016.10.15 体验人:黄瑞钰(0314025 ...

  4. hdu 1272 小希的迷宫

    小希的迷宫 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  5. Altium Designer 15 --- Design PCB Frame by Rhinoceros

    step 1: Draw a PCB shape and the main component placed in the PCB. The drawing sheet should be in th ...

  6. ServiceStack.Text 更快的序列化

    Json.net 是以前最经常用的序列化组件,后来又注意到ServiceStack号称最快的,所以我做了以下测试 1)Json.net using System; using System.Colle ...

  7. easyUI学习笔记之tab组件的鼠标事件

    一.鼠标经过组件后的事件,自动打开选项卡内容 var tabs = $('#tt').tabs().tabs('tabs'); for(var i=0; i<tabs.length; i++){ ...

  8. 20145212 《Java程序设计》第7周学习总结

    20145212 <Java程序设计>第7周学习总结 教材学习内容总结 时间的度量 格林威治时间(GMT):通过观察太阳而得,因为地球公转轨道为椭圆形且速度不一,本身自传减速而造成误差. ...

  9. Java数据结构——有序链表

    //================================================= // File Name : SortedList_demo //--------------- ...

  10. curl 工具的使用

    curl命令是个功能强大的网络工具,支持通过http.ftp等方式下载文件.上传文件.还可以用来抓取网页.网络监控等方面的开发,解决开发过程中遇到的问题. 常用参数 curl命令参数很多,这里只列出我 ...