<!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. CSS3 Media Queries 详细介绍与使用方法

    Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支持. 而Media Queries 的套用方法千变万化,要套用在什么样的装置中,都可以自己来定义. 到底什么是 ...

  2. js实现文字横向滚动

    页面布局      <div id="scroll_div" class="fl">         <div id="scroll ...

  3. ps入门教程:裁剪工具、修复画笔工具、图章工具的使用

    本节课程主要内容:学习裁剪工具.污点修复画笔工具.修复画笔工具.修补工具.套索工具.红眼工具.仿制图章工具和图案图 章工具的应用.----------------------------------- ...

  4. Android调用本机应用市场，实现应用评分功能

    原本以为应用评分是个很小的功能,但是一实现才发现真不是个小事.网上搜索资料没有找到答案,在很多开发群里面询问了很多人也没有解决问题,最后分析log,反编译看源码才终于有了些眉目,好吧,上代码: try ...

  5. Object Pool

    设计模式之美:Object Pool(对象池)   索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):实现 DatabaseConnectionPool 类. 意图 运用对象池化 ...

  6. Javascript模块化编程之Why

    说到模块化编程,大家比较容易想到Java, C++等语言,感觉这事和Javascript沾不上一丁点边.虽说Javascript看上去好像同Java有莫大的关系,但那也只是一厢情愿,不过是挂羊头卖狗肉 ...

  7. 无法识别的配置节 applicationSettings

    在.NETFramework2.0中,如果发布的虚拟目录程序引用了外部的webservice访问接口,配置文件会出现下边的applicationSettings节点,如 但是访问应用程序时候,可能会出 ...

  8. golang切片slice

    切片slice是引用类型 len()函数获取元素的个数 cap()获取数组的容量 1.申明方式 (1)var a []int 与数组不同的是他不申明长度(2)s2 := make([]int, 3, ...

  9. 自由的Debian

    原文:http://www.debian.org/intro/free 许多人在刚开始接触自由软件时都会很困惑,原因是自由软件中的自由一词并不是他们所期望的那样.对他们而言自由意味着免费.一本英文字典 ...

  10. cocos2d(CCSprite绑定不规则刚体与精灵一起移动)

    对于不规则的精灵我们可以借助PhysicsEditor来制作shape , 对于地图可以使用Tiled软件制作瓷砖地图. 今天主要记录一下如何把CCSprite与不规则刚体进行绑定,然后一起移动 // ...