<!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. 表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法

    原文:表单验证的3个函数ISSET().empty().is_numeric()的使用方法 本文就简单讲一下php中表单验证的三个函数,应该比较常用吧,最后给一些示例,请看下文. ISSET();—— ...

  2. Spring之SpringMVC(源码)初始化DispatcherServlet策略配置

    1.从上一篇文章中可以SpringMVC初始化的过程中完成的其中一件事就是DispatcherServlet的相关策略的配置,如下所示 protected void initStrategies(Ap ...

  3. SUI Mobile框架开发，android、ios表单遇到的问题

    1.页面添加区域滚动,滚动区域内元素事件无效问题 解决方法: <script type="text/javascript" charset="utf-8" ...

  4. Progit Update Check Page

    ######### ######### #########

  5. C# 语言的两个html解析器

    基于C# 语言的两个html解析器   基于C# 语言的两个html解析器 1)Html Agility Pack http://nsoup.codeplex.com/ 代码段示例: HtmlDocu ...

  6. 让.NET程序快速释放内存的办法

    原文:让.NET程序快速释放内存的办法 公司里的一个程序,经过了N个人的手后发现上了生产内存会一直涨,直到物理内存几乎被占用完毕后突然就下降下来(估计是GC给释放了),然后再一直涨.这个程序主要是对字 ...

  7. C#:vs2010无法打开vs2012创建的项目

    vs低版本打开高版本创建的项目时会提示"选择的文件是解决方案文件,但是用此应用程序的较新版本创建的,无法打开" 解决办法: 写字板打开解决方案sln文件 将其改成你现在用的vs版本 ...

  8. .Net组件程序设计

    .Net组件程序设计之上下文 在后续篇幅的远程调用的文章里有说到应用程序域,那是大粒度的控制程序集的逻辑存在,那么想对对象的控制又由谁来做主呢?没错了,就是上下文.CLR把应用程序域更细化了,在应用程 ...

  9. storm安装(2)ZeroMQ、JZMQ、Python、Java环境的安装

    2.ZeroMQ安装 把安装本件zeromq-2.1.7.tar.gz拷贝到home文件路径下, 给文件加入权限 chmod +x /home/zeromq-2.1.7.tar.gz 解压文件 tar ...

  10. Media Formatters媒体格式化器

    Media Formatters媒体格式化器 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/344 ...