简单的遮罩层效果，user登陆显示效果
<!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: <input type="text" name="name" /><br />
<br />
PASSWORD:
<input type="password" name="psw" />
<div style="margin: 5px;">
<input type="submit" id="sub_ok" value="提 交" /> <input type="button" value="取 消" id="cancel" />
</div>
</div>
</form>
</body>
</html>
简单的登陆页面的跳转，是实现了效果，可是提交的时候，却没有触发submit，不过不违今天的主题哦。欢迎高手指点
简单的遮罩层效果，user登陆显示效果的更多相关文章
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 利用div实现遮罩层效果
利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...
- html+css源码之实现登录弹出框遮罩层效果
在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...
- layer遮罩层 简单的遮罩层
在这里提供一个简单layer遮罩层,想深入了解可以进入 layer官网 多多学习哦. 先看下HTML页面代码 <!DOCTYPE html> <html lang="en& ...
- Android 遮罩层效果
(用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...
- Android 遮罩层效果--制作圆形头像
(用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...
- jquery图片放大镜和遮罩层效果
图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...
- jQuery弹出遮罩层效果完整示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- JS自动化测试 单元测试之Qunit
前言 因为公司开发了一套javascript SDK需要测试,在网上找了很久,找到了JQuery团队开发的QUnit,和基于JUnit的JsUnit,还有一些还没有看,先讲讲QUnit吧 下载 登录J ...
- APUE学习笔记(1)：APUE运行环境
APUE全称<Advanced Programming in the UNIX Environment>(UNIX环境高级编程) 书中例子大都使用作者自己写的头文件,所以需要解决一下,还好 ...
- 谈Linux
新手谈Linux 目录: 什么是Linux? Linux与UNIX的区别 Linux与Windows比较 什么是Linux发布版? Linux应用领域 Linux版本的选择 怎么学习Linux? ...
- [ext/iconv/iconv.lo] Error 1
办法1: wget http://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.13.1.tar.gz tar -zxvf libiconv-1.13.1.tar.g ...
- NYOJ 58 步数最少 【BFS】
意甲冠军:不解释. 策略:如果: 这个问题也可以用深宽搜索搜索中使用.我曾经写过,使用深层搜索.最近的学校范围内的搜索,拿这个问题来试试你的手. 代码: #include<stdio.h> ...
- oracle读写文件--利用utl_file包对磁盘文件的读写操作
oracle读写文件--利用utl_file包对磁盘文件的读写操作 摘要: 用户提出一个需求,即ORACLE中的一个表存储了照片信息,字段类型为BLOB,要求能导出成文件形式. 本想写个C#程序来做, ...
- VS2012下systemC配置
一.编译System库 1.下载SystemC library source code 到http://www.systemc.org注册会员账号后,即可下载SystemC ...
- 什么是gulp
gulp:入门简介 本文是gulp的入门级介绍,主要内容包括什么是gulp,gulp与grunt有什么区别,gulp可以解决grunt存在的哪些问题,以及一个简单的说明例子. 什么是gulp gu ...
- 简单的三层asp.net webForm使用Ninject实现Ioc
简单的三层asp.net webForm使用Ninject实现Ioc 在asp.net webform下使用Ninject的简单过程. 首先建立个项目,如下图,简单三层(PS:UI层要同时引用BLL. ...
- MS SQL优化
数据库优化实践[MS SQL优化开篇] 数据库定义: 数据库是依照某种数据模型组织起来并存在二级存储器中的数据集合,此集合具有尽可能不重复,以最优方式为特定组织提供多种应用服务,其数据结构独立于应 ...