<!DOCTYPE html>

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

 <head>

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

 <title></title>

 <style>

 #content {

 width: 300px;

 height: 150px;

 padding: 10px;

 margin:  auto;

 display: none;

 line-height: initial;

 }

 span {

 width: 50px;

 margin-right: 10px;

 border: 1px solid red;

 }

 </style>

 <script>

 onload = function () {

 var links = document.getElementById("login");

 var cancle = document.getElementById("cancel");

 var content = document.getElementById("content");

 links.onclick = function () {

 var cover = document.createElement("div");

 cover.id = "cover";

 cover.style.left = ;

 cover.style.right = ;

 cover.style.top = ;

 cover.style.bottom = ;

 cover.style.position = "fixed";

 cover.style.backgroundColor = "#CCC";

 cover.style.opacity = "0.5";

 cover.appendChild(content);

 content.style.display = "block";

 content.style.backgroundColor = "white";

 document.body.appendChild(cover);

 return false;

 };

 // cancel its remove the cover

 cancel.onclick = function () {

 document.body.removeChild(document.getElementById("cover"));

 };

 //login

 document.getElementById("sub_ok").onclick = function () {

 formsub = document.getElementsByTagName("form")[];

 formsub.submit();

 alert("登陆成功了");

 return false;

 };

 };

 </script>

 </head>

 <body>

 <form>

 <div>

 <a href="#" id="login">登陆</a>

 </div>

 <div id="content">

 NAME:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="name" /><br />

 <br />

 PASSWORD:

 <input type="password" name="psw" />

 <div style="margin: 5px;">

 <input type="submit" id="sub_ok" value="提 交" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="取 消" id="cancel" />

 </div>

 </div>

 </form>

 </body>

 </html>

简单的登陆页面的跳转，是实现了效果，可是提交的时候，却没有触发submit，不过不违今天的主题哦。欢迎高手指点

简单的遮罩层效果，user登陆显示效果的更多相关文章

  1. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  2. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  3. 利用div实现遮罩层效果

    利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...

  4. html+css源码之实现登录弹出框遮罩层效果

    在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...

  5. layer遮罩层 简单的遮罩层

    在这里提供一个简单layer遮罩层,想深入了解可以进入 layer官网 多多学习哦. 先看下HTML页面代码 <!DOCTYPE html> <html lang="en& ...

  6. Android 遮罩层效果

    (用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...

  7. Android 遮罩层效果--制作圆形头像

    (用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...

  8. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

  9. jQuery弹出遮罩层效果完整示例

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

随机推荐

  1. VMware7安装CentOS6.5教程

    VMware7安装CentOS6.5教程 http://www.91linux.com/html/2014/CentOS_0415/9727.html工欲善其事,必先利其器.学习linux系统,必须先 ...

  2. [译]Java 设计模式之组合

    (文章翻译自Java Design Pattern: Composite) 组合模式相对来说是比较简单的,但是它在很多设计中被用到,比如SWT.Eclipse工作空间等等.它创建了一个可以通过唯一的方 ...

  3. [译]Java 设计模式之命令

    (文章翻译自Java Design Pattern: Command) 命令设计模式在进行执行和记录的时候需要一个操作及其参数和封装在一个对象里面.在下面的例子中,命令是一个操作,它的参数是一个Com ...

  4. [译]Java 设计模式之中介者

    (文章翻译自Java Design Pattern: Mediator) 中介者设计模式被用于一组的同事进行协作.这些同事不彼此进行直接的交流联系,但是是通过中介者. 在下面的例子中,A同事想去说话, ...

  5. 使用OpenWrt的SDK

    原文:http://wiki.openwrt.org/doc/howto/obtain.firmware.sdk 为什么要使用SDK: Reasons for using the SDK are: C ...

  6. html5 Geolocation(地理位置定位)学习

    1.html5 Geolocation html5 Geolocation API 使用很简单,请求一个位置信息,如果用户同意,浏览器会返回一个位置信息,该位置是通过用户的底层设备(手机,电脑) 提供 ...

  7. 转载：21个免费的UI界面设计工具、资源及网站

    我们刚刚介绍了移动设计初探:触屏网页设计.本文将介绍一些UI界面与设计使用的元素.软件和网站.内容很丰富,适合用户体验设计师.界面设计师.产品设计师.JS前段开发.手机产品设计以及iPad和平板电脑产 ...

  8. Hypeiron Planning/Essbase修改规划类型名称

    1.修改planning关系库 1.1--修改Plan_type,例如将type_name “Plan1”修改为”Plan1ts”,提交 SELECT * FROM hsp_plan_type FOR ...

  9. jQuery选择表格中的列

    以选择table中的第一列为例: 方式1: $("table tr").find("td:first").html("first column&quo ...

  10. C# 号码归属地查询算法（根据Android来电归属地二进制文件查询修改）

    前言 近期有个项目需要用到号码归属查询,归属地数据库可能比不上ip138,淘宝上也有卖的-,-! 文本提供一个279188条记录并压缩成562KB的归属地数据.我在互联网上搜索了相关文章,要不是数据库 ...