简单的遮罩层效果，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 拖拽实现
代码参考 <!DOCTYPE html> <html lang="en"> <title>拖拽</title> <head&g ...
- 学习html5的WebSocket连接
1.什么是WebSocket WebSocket 是一种自然的全双工.双向.单套接字连接.使用WebSocket,你的HTTP 请求变成打开WebSocket 连接(WebSocket 或者WebSo ...
- 折腾源WRT的AC路无线路由-2
在创纪录的开箱图,开箱后,我觉得大尺寸,因此,获得一些各种尺寸,喜欢网上购物的参考.也许这,安装后,它占用的大小:基本长度=28.5cm.深度=19.5cm,高=19.5,因为制造商推荐的约两个天线是 ...
- mvc上传头像加剪裁功能
asp.net mvc上传头像加剪裁功能 正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery ...
- SQLSERVER数据库学习总结七（视图，索引）
--视图的主意点:不能和表的名称相同,如果某一列为函数,表达式,常量或者与来自多张表的列名相同,必须为列定义名称,不能在试图上创建索引 if exists(select 1 from sys.syso ...
- LInux 2.6 编译内核出现Question
问:在make menuconfig配置完之后(选的默认配置),然后就make出现如下错误:root@org:/usr/src/linux-2.6.32.27# make CHK include/li ...
- Binder机制，从Java到C （10. Binder驱动）
Binder驱动的代码都在kernel里面,这里就简单讲一下里面涉及到的几个东西: 1.MemoryBinder其实本质上就是一中数据传输方式,这种方式是通过binder driver实现的. 我们知 ...
- 判断UA这种事不能说的太明。
[微博] Mozilla/5.0 (Linux; U; Android 4.2.2; zh-cn; GT-I9502 Build/JDQ39) AppleWebKit/534.30 (KHTML, l ...
- [NLP自然语言处理]计算熵和KL距离，java实现汉字和英文单词的识别，UTF8变长字符读取
算法任务: 1. 给定一个文件,统计这个文件中所有字符的相对频率(相对频率就是这些字符出现的概率——该字符出现次数除以字符总个数,并计算该文件的熵). 2. 给定另外一个文件,按上述同样的方法计算字符 ...
- C#制作高仿360安全卫士窗体3
C#制作高仿360安全卫士窗体(三) 距上篇C#制作高仿360安全卫士窗体(二)也将近一个多月了,这个月事情还是像往常一样的多.不多我也乐在其中,毕竟我做的是我喜欢做的东西.今天特地抽空把怎么制作 ...