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

随机推荐

精通javascript（看书笔记）
变量的类型检查 //检测类型 var str = "Hello World"; if (typeof str=="string") {//使用typeof来判断 ...
JS-计算器制作
不完善,接下来想着把运算符分开成一个一个的按钮... <!DOCTYPE html><html> <head> <meta charset="UTF ...
BZOJ1972: [Sdoi2010]猪国杀
“此题注意样例少了个J,且牌堆可能用完牌,若牌用完则不停取最后一张”.——hzwer 然后直接模拟,认真读题,理清思路. #include<cstdio> #include<list ...
xbmc的静态链接办法
XBMC是一个相当酷的音频/视频播放器,号称家庭影视中心. 我是希望静态将一些库链接进可执行程序的,这样我用的ArchLinux就不用天天在更新一些东西了但XBMC试了很多次,编译成功后,总是在运行 ...
C# LIST列表的使用
1. List的基础.常用方法: 声明: 1.List<T> mList = new List<T>(); T为列表中元素类型,现在以string类型作为例子 E.g.: L ...
MySQL增加列，修改列名、列属性，删除列
mysql修改表名,列名,列类型,添加表列,删除表列 alter table test rename test1; --修改表名 alter table test add column name v ...
VM安装linux
看图简单流程即可.注意磁盘空间至少30G,实用oracle数据库时需要更大,可以后期增加. 静待安装完成即可.一定记得创建的用户名及密码,及root用户的密码.
20145212《Java程序设计》实验报告二《 Java面向对象程序设计》
20145212 实验二< Java面向对象程序设计> 实验内容单元测试三种代码伪代码百分制转五分制: 如果成绩小于60,转成"不及格" 如果成绩在60与70之 ...
js无间隙滚动
代码一: ; //设置文字滚动速度 dome2.innerHTML=dome1.innerHTML //复制dome1为dome2 function Marquee(){ ) //当滚动至dome1与 ...
xhprof安装使用
安装: 到pecl官网下载xhprof的最新版:http://pecl.php.net/package/xhprof wget http://pecl.php.net/get/xhprof-0.9.4 ...

div+css模仿登录界面

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

随机推荐

热门专题