<!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. APP-随身听

    简单到复杂听你的专属音响界,听金融.听物业,听新闻和其他节目专辑,简要介绍了新的音频应用,给你不一样的聆听体验.还记得老歌做?这里有.您留声机的一部分!很简单的音频应用,随时随地与此应用程序来听你的私 ...

  2. 【 D3.js 进阶系列 — 5.0 】 直方图

    直方图用于描写叙述概率分布,D3 提供了直方图的布局 Histogram 用于转换数据. 假设有数组 a = [10, 11, 11.5, 12.5, 13, 15, 19, 20 ],如今把10~2 ...

  3. POJ 1579-Function Run Fun（内存搜索）

    Function Run Fun Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 16503   Accepted: 8514 ...

  4. .NET的微型Web框架 Nancy

    .NET的微型Web框架 Nancy .NET的微型Web框架 Nancy   大部分微软平台的开发人员如果选择开发框架只能是在ASP.NET WEBFORM和ASP.NET MVC两个之间选择. 而 ...

  5. javascript脚本化文档

    1.getElememtById /** * 获取指定id的的元素数组 */ function getElements(/*ids...*/) { var elements = {}; for(var ...

  6. android微信付费

    原文地址:http://blog.csdn.net/intbird 微信官方文档地址:t=resource/res_main_tmpl&verify=1&lang=zh_CN" ...

  7. WinXP 无线技巧“区域没有通过无线网络中的发现”一个可能的原因!

    貌似WinXP经典或无限.我一直沿用至今,我不知道这一天会放弃. 遇到的问题,也许有XP爱好者都遇到过还得看,写下一点文字注释.----------------------- 切割线 -------- ...

  8. Web面试之JQuery

    程序员Web面试之JQuery   又到了一年一度的毕业季了,青春散场,却等待下一场开幕. 在求职大军中,IT行业的程序员.码农是工科类大学生的热门选择之一, 尤其是近几年Web的如火如荼,更是吸引了 ...

  9. 编辑控件CKEditor和CKFinder

    -使用HTML编辑控件CKEditor和CKFinder Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEdit ...

  10. 有关Android存储的相关概念辨析

    我想念许多Android开发人员在碰到有关存储的相关问题时,肯定遇到过“内部存储/内存”.“外部存储/外存”等类似的概念,尤其是将相关概念跟非开发人员解释时,那真是“秀才遇到兵,有理说不清哪”.包括我 ...