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>

效果图：

网友提供的代码：

 <!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模仿登录界面的更多相关文章

HTML+CSS系列:登录界面实现
一.效果二.具体实现 1.index.html <!DOCTYPE html> <html> <head> <meta charset="utf- ...
html+css实现登录界面
<!DOCTYPE html> <style type="text/css"> body{ background-color: #555555; } #ti ...
CSS样式案例(2)-制作一个简单的登录界面
首先来张完工的效果图. 一.html文件如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
运用HTML5+CSS3和CSS滤镜做的精美的登录界面
原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...
iOS开发UI篇—模仿ipad版QQ空间登录界面
iOS开发UI篇—模仿ipad版QQ空间登录界面一.实现和步骤 1.一般ipad项目在命名的时候可以加一个HD,标明为高清版 2.设置项目的文件结构,分为home和login两个部分 3.登陆界面的 ...
界面编程模仿篇(QQ登录界面逼真篇)
写了好多天的爬虫,偷空前前后后用了两天的时间(排除吃饭睡觉)写完了这个QQ登录界面,看起来还凑和着吧,如果是的大神的,莫见笑,纯属业余作品,废话先不多说,截图如下,其中第二幅图片中的红色方框部份有待完 ...
[转]Android：布局实例之模仿QQ登录界面
Android:布局实例之模仿QQ登录界面预览图: 准备: 1.找到模仿对象 QQ登陆界面UI下载>>>>> 2.导入工程 3.查看布局结构和使用控件其对应效果图分布 ...
Android：布局实例之模仿QQ登录界面
预览图: 准备: 1.找到模仿对象 QQ登陆界面UI下载>>>>> 2.导入工程 3.查看布局结构和使用控件其对应效果图分布为 4.分析样式选择器下拉箭头2种样式:点 ...
Android：布局实例之模仿京东登录界面
预览图及布局结构参考: 布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout ...

随机推荐

PTA fzu_oop_east
GitHub链接: 传送门 5-1该日是该年的第几天定义一个日期类Date,内有数据成员年.月.日,另有成员函数:构造函数用于初始化数据成员,输出,闰年的判断. 编写主函数:创建日期对象,计算并输出 ...
修改oracle系统用户system的密码
C:\Users\Administrator>echo %ORACLE_SID% %ORACLE_SID% C:\Users\Administrator>set ORACLE_SID=or ...
Django_collections01
python manage.py flush python manage.py changepassword username python manage.py createsuperuser pyt ...
Cheminformatic Set
蛋白: 数据库 1. 蛋白晶体结构数据库 http://www.rcsb.org/pdb/home/home.do 2. 蛋白注释数据库 http://www.uniprot.org/ 工具 1. r ...
context.Request.Files为NULL问题在实现图片上传功能的时候出现在ashx等处理页面出现context.Request.Files为NULL异常，有几点需要注意：
.在客户端可以将form用submit提交,如下: <%@ Page Language="C#" AutoEventWireup="true" CodeF ...
swfUpload 上传图片
前端: <script src="~/Scripts/swfupload/swfupload.js"></script> <script src=&q ...
枚举类型Enum
包java.dataStructure中,文件名Enum_demo.java 在JDK5中引入了一个新的关键字——enum,可以直接定义枚举类型在申明枚举类的时候,也可以申明属性.方法和构造函数,但 ...
javascript 小技巧
1:Boolean()==!! console.log(Boolean(888));//true console.log(!!(888));//true console.log(Boolean(&qu ...
Struct Member Default Value
在C#中struct是值类型的数据类型,其默认值相当于调用了无参数默认构造函数之后的值.这也许就是struct不允许重载无参数默认构造函数的原因. https://msdn.microsoft.com ...
Redis 安装，主从配置及Sentinel配置自动Failover
1.安装redis 首页地址:http://redis.io/ 下载地址:http://download.redis.io/ 下载最新的源码包 tar -zxvf redis-stable.tar.g ...

div+css模仿登录界面

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

随机推荐

热门专题