简单的遮罩层效果，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/ ...
随机推荐
- UC编程：字符读取与行读取
字符读取函数的应用 下面的演示程序实现从/etc/passwd文件中提取用户名,打印到屏幕上并保存在copyname.txt文件中 使用的函数是getc().putc().putchar() [c] ...
- 利用PhantomJS进行网页截屏
利用PhantomJS进行网页截屏 关于PhantomJS PhantomJS 是一个基于WebKit的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种W ...
- App.config
App.config的学习笔记 昨天基本弄清config的使用之后,再看WP的API,晕了.结果WP不支持system.configuration命名空间,这意味着想在WP上用App.config ...
- Hudson+Maven+Svn搭建持续集成环境
Hudson+Maven+Svn搭建持续集成环境 博客分类: 配置管理 mavenSVNTomcat项目管理配置管理 一.所用开发工具 1. Hudson: Hudson 是一种革命性的开放源码 ...
- 什么是umbraco
在win7上部署umbraco Umbraco是一个开放源码的CMS内容管理系统,基于asp.net建立,使用mssql进行存储数据. 使用Umbraco ,设计师能创造出有效的XHTML标记模板和开 ...
- 构建具有深度和灵活性的安卓Wear应用
自从去年Android 5.0发布以后就一直在关注可穿戴方面的事情.这个年的前后一直在忖度该怎么海淘一个moto 360,可是考虑到iWatch在本年度四月份发布,估计现在已经有的Android可穿戴 ...
- Oracle组函数、多表查询、集合运算、数据库对象（序列、视图、约束、索引、同义词）等
count组函数:(过滤掉空的字段) select count(address),count(*) from b_user max() avg() min(),sum() select sum(age ...
- Js模块模式
模块模式 索引 引子 什么是模块模式 命名空间模式 声明依赖 私有和特权成员 即时函数 揭示模块模式 结语 引子 这篇算是对第9篇中内容的发散和补充,当时我只是把模块模式中的一些内容简单的归为函数篇中 ...
- iOS基础 - UITableView的数据源(dataSource)和代理(delegate)
UITableView的数据源(dataSource)和代理(delegate) UITableView需要一个数据源(dataSource)来显示数据,UITableView会向数据源查询一共有多少 ...
- CRM 2013 切换显示语言
想要更改显示需要,必须在服务器上安装语言包.不过语言包中仅包含系统的实体和字段的翻译,想要自定义的实体字段根据选择的语言变化,必须做好实体字段的翻译. 安装好语言包后,找到设置->管理-> ...