简单的遮罩层效果，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/ ...
随机推荐
- Java 多并发之原子访问（Atomic Access）
在编程中,一个原子操作是只会出现一次的.一个原子操作在中间不会停止:要么全部发生要么一点也不发生.我们只有在原子操作完成之后才会看到原子操作的具体影响. 甚至是非常简单的表达式能够构造分解为简单操作的 ...
- 硬盘安装Archlinux「2013-12-26」
按照Archlinux的中文WIKI安装完成,最后安装引导失败.原因未知. 折腾的脑袋好大,本来都要放弃了,幸好在贴吧发帖求助,吧友@atmouse耐心热心的帮助 最后重启成功启动.帖子地址:http ...
- Spring IOC之基于注解的容器配置
Spring配置中注解比XML更好吗?基于注解的配置的介绍提出的问题是否这种途径比XML更好.简单来说就是视情况而定. 长一点的答案是每一种方法都有自己的长处也不足,而且这个通常取决于开发者决定哪一种 ...
- Asterisk 未来之路3.0_0006
原文:Asterisk 未来之路3.0_0006 Modules Asterisk 是基于模块构建的.一个模块提供某个特定的功能,它是动态的被装载.比如:信道驱动(chan_sip.so),或可以连接 ...
- Linux解决：svn: Can't connect to host '*.*.*.*': 因为连接的方没有正确回答或连接在以后的时间
svn服务启动,在server在可使用命令将文件检查,但它不能检测其他计算机.已经提出: "svn: Can't connect to host '*.*.*.*': 因为连接方在一段时间后 ...
- 非接触式电子音乐控制器CHIMAERA
本篇文章,我将介绍个有意思的设备. 她就是Chimaera,一个基于电磁场效应的非接触式电子音乐控制器. <弹奏Chimaera的声音> 霍尔效应传感器阵列及其周围部件组成了一个连续的2D ...
- Tabs - 选项卡插件
接上篇Tabs - 选项卡插件 其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充 9)Flipping C ...
- ajax的post请求
get和post是http请求方法最主要的两种方式. post: 来个例子test.html <!doctype html> <html lang="en"> ...
- EasyUi的快速开发框架
基于EasyUi的快速开发框架 先看图,下边这个简单的增.删.改.查,如果自己写代码实现,这两个页需要多少行代码? 如果再有类似的增.删.改.查,又需要多少行代码? 我最近搞的这个快速开发框架中, ...
- QMVC
高性能.NET MVC之QMVC! ASP.NET!这个词代表者一个单词Fat!因为他总是捆绑着太多的太多的类,太多太多的各种功能!你也许会用到,如果你反编译或阅读他们开源的源码,你会不会犹如在大海中 ...