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

随机推荐

JS+JavaBean判断管理员增删改的操作权限
目标:用户分管理员和普通用户2种,都可以登陆,但是管理员才可以执行增删改的权限,普通用户可以看,但是执行的时候提示权限不足帖代码片段:我只会这一种,在JSP页面判断省略得权限数值方法: <% ...
【Beta】第三次任务发布
后端(补做) #86 了解社区新建文章.添加评论(回复)的机制.整理成API文档,包括如何请求新建文章.新建评论(回复).如何获取文章内容和评论内容. 验收条件:文档PM要能看懂. 前端(补做) #8 ...
Ubuntu修改mysql默认编码的方法
ubuntu使用apt-get安装mysql后,server的默认编码是latin1,下面把server的编码修改成utf8. 编码相关信息: 1 2 3 4 5 6 7 8 9 10 11 12 1 ...
RBAC权限设计
http://blog.csdn.net/ms_x0828/article/details/7035956 RBAC 模型作为目前最为广泛接受的权限模型角色访问控制(RBAC)引入了Role的概念, ...
RestSharp使用
class Program { private readonly static string investRankingForAllUrl = "http://192.168.1.98:90 ...
aircrack-ng 多网卡启动后环境清理
#!/bin/sh pkill airodump airmon-ng stop wlan0mon service network-manager restart rm -rf sadsad*
LDA（主题模型算法）
LDA整体流程先定义一些字母的含义: 文档集合D,topic集合T D中每个文档d看作一个单词序列< w1,w2,...,wn >,wi表示第i个单词,设d有n个单词.(LDA里面称之为 ...
DecimalFormat类
DecimalFormat类也是Format的一个子类,主要作用是格式化数字. 在格式化数字的时候比直接使用NumberFormat更加方便,因为可以直接指定按用户自定义的方式进行格式化操作,与Sim ...
php基础语句2
计算一个月有多少天 $count = date("t",strtotime("2014-09-01")); // 一个月有多少天
JAVA数组的典型操作

div+css模仿登录界面

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

随机推荐

热门专题