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

随机推荐

软件产品案例分析——K米
第一部分调研.评价调研测试机型:iPhone 6s K米版本:4.3.0 直观感受界面干净,功能丰富,操作不复杂,易上手错误类无法分享KTV主页步骤:进入KTV主页,点击右上角分享图标 ...
windows 环境下wamp环境的搭建。
学php要搭建wamp环境,经常使用的是wampserver,也挺好用的,一键傻瓜式安装,挺省事的.但是程序员都是爱折腾的,总要求要有完美的环境.于是用来用去,觉得还是散装环境最能体现自己的逼格. 其 ...
logback 详解
原创文章,转载请指明出处:http://aub.iteye.com/blog/1103685, 尊重他人即尊重自己详细整理了logback常用配置, 不是官网手册的翻译版,而是使用总结,旨在更快更透 ...
js020-JSON
js020-JSON 20.1 语法 JSON的语法可以表示为一下三种类型的值. 简单值使用与JS相同的语法,可以在JSON中表示字符串.数值.布尔值和null,但是JSON不支持JS中的特殊性Un ...
js初学—实现checkbox全选功能
布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...
安装ubuntu和安装ubuntu后要安装的软件列表
安装ubuntu 老毛桃进入win pe修复启动项在win pe下面制作ubuntu的安装盘,只用的软件是ultraISO 参考博客下面的分区的那篇文章 http://jingyan.baidu. ...
eclipse里怎么用命令行输入args
eclipse中给java应用传args参数的方法如下:1.先写好Java代码,比如文件名为IntArrqy.java:2.在工具栏或菜单上点run as下边有个Run Configuration:3 ...
MySQL学习笔记——增删改查
有关数据库的DML操作 -insert into -delete.truncate -update -select -条件查询 -查询排序 -聚合函数 -分组查询 DROP.TRUNCATE.DELE ...
Ecshop商品促销时间精确到小时分钟和秒的设置方法调用时间
第一步:找到admin/tempate/good_info.htm文件把<input name="selbtn1" type="button" id=& ...
快递api网接口快递调用方法
----------------实体类 [DataContract] public class SyncResponseEntity { public SyncResponseEntity() { } ...

div+css模仿登录界面

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

随机推荐

热门专题