<!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. Linux开源模块迁移概述暨交叉编译跨平台移植总结－－从《嵌入式Linux驱动模板简洁和工程实践》

    本文摘录<嵌入式Linux驱动模板简洁和工程实践>一本书"开发和调试技术". Linux强大的是,有那么多的开源项目可以使用.通常非常需要可以通过寻找相关的源模块被定义 ...

  2. 让低版本的IE浏览器 强制渲染为IE8 或者 以上 浏览器模式

    让低版本的IE浏览器 强制渲染为IE8 或者 以上 浏览器模式 那么就要用下面的方法:让网页兼容ie9 复制代码 代码如下: <!–[if lte IE 8]> <meta http ...

  3. 读书笔记—CLR via C#反射

    前言 这本书这几年零零散散读过两三遍了,作为经典书籍,应该重复读反复读,既然我现在开始写博了,我也准备把以前觉得经典的好书重读细读一遍,并且将笔记整理到博客中,好记性不如烂笔头,同时也在写的过程中也可 ...

  4. 国内外最全面和主流的JS框架与WEB UI库

    当下对于网站前段开发人员来说,很少有人不使用一些JS框架或者WEB UI库,因此这些可以有效提高网站前段开发速度,并且能够统一开发环境,对于不同浏览器的兼容性也不需要程序员操心,有了这些优点,当然大家 ...

  5. Ubuntu下开发环境搭建

    安装基础开发包,主要gcc,g++等 sudo apt-get install build-essential 未完待续

  6. C++关于数字逆序输出的两种思路，及字符串逆序输出

    C++关于数字逆序输出的两种思路,及字符串逆序输出 作者:GREATCOFFEE 发布时间:NOVEMBER 15, 2012 分类:编程的艺术 最近在跟女神一起学C++(其实我是不怀好意),然后女神 ...

  7. 并行Linq(一)

    .Net 并行计算 ----并行Linq(一) 本文是.Net 并行计算 的第三篇 欢迎大家拍砖,阅读本文需要有LINQ基础,因为并行LINQ (PLinq) 其实是LINQ To Object 的并 ...

  8. Day2：T3DP(基于排列组合思想)

    T3:DP(基于排列组合思想的状态转移) 其实之前写排列组合的题目有一种很茫然的感觉.... 应该是因为之前没有刷过所以没有什么体会 上次刷的vj1060有用到,但是写状态转移还是第一次学习吧 ccy ...

  9. Objective-C Blocks测试题与解析

    Objective-C Blocks测试 你真的理解blocks在objective-c中是如何工作的了吗,做个测试检验一下吧. 所有的测试结果已被以下版本的LLVM验证: Apple clang v ...

  10. mac osx 10.9安装配置macvim

    如果你已经安装了macvim,升级后又不能用了,建议你可以看看http://kodira.de/2013/10/macvim-osx-10-9-mavericks/这篇文章,如果你还没有安装,下面由我 ...