遮盖层实现（jQuery+css+html）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>遮盖层</title>
<style>
/* 登录层 */
#choose{
display:none;
width:360px;
height:230px;
background:#69F;
position:absolute;
top:%;
left:%;
z-index:;
opacity:0.8; /*背景的透明度:(Firefox适用；）*/
filter:alpha(opacity =); /*背景的透明度:(IE适用)；*/
} /*遮罩层*/
#mid{
display:none;
width:%;
height:%;
background:#;
position:absolute;
top:;
left:;
z-index:;
opacity:0.4; /*背景的透明度:(Firefox适用；）*/
filter:alpha(opacity =); /*背景的透明度:(IE适用)；
}
</style>
</head>
<body>
<a href="#" class="click">点击按钮</a>
<!--填充内容开始 往body里面写点内容，因为遮盖层要通过body去获取界面的高宽度，从而body的高宽同时决定了遮盖层的高宽。但是码友们在平时运用这个demo的时候，由于所写body的代码肯定是有的，而且是比较多的，所以一定要忽略我下面填充的内容->
1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br />
1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />
<!-- 填充内容结束 -->
<!-- 表单层 -->
<div id="choose"> <!-- 表单头部 -->
<a class=close>关闭</a>
<table>
<tr>
<td colspan="3" class="td">
</td>
</tr>
<tr>
<td class="td1">登录名：</td>
<td class="td2"><input type="text"/></td>
<td class="td3">*</td>
</tr>
<tr>
<td class="td1">密 码：</td>
<td class="td2"><input type="password"/></td>
<td class="td3">*</td>
</tr>
<tr>
<td class="td1">验证码：</td>
<td class="td2"><input type="text"/></td>
<td class="td3">*</td>
</tr>
<tr>
<td colspan="3" align="center"><input type="submit" value="登陆"/></td>
</tr>
</table>
</div> <!-- 遮盖层 -->
<div id="mid"></div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
<script>
$(function(){
$(".click").click(function(){
var bh = $("body").height(); //获取当前浏览器界面的高度
var bw = $("body").width(); //获取当前浏览器界面的宽度
$("#mid").css({
height:bh, //给遮盖层的div的高宽度赋值
width:bw,
display:"block" //遮盖层显示
});
$("#choose").show();
});
$(".close").click(function(){
$("#choose").hide();
$("#mid").hide();
});
});
</script>
</html>
遮盖层实现（jQuery+css+html）的更多相关文章
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- jquery css事件编程 尺寸设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery css事件编程 位置 操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery & CSS 制作金属质感的选择按钮
如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- 复习练习（03）jquery Css方法一步步升级
jquery Css方法一步步升级 <script src="jquery-1.8.3.js"></script> <script type=&quo ...
- jQuery CSS 的操作函数
jQuery CSS 操作函数 下面列出的这些方法设置或返回元素的 CSS 相关属性. CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. o ...
- Jquery+css实现图片无缝滚动轮播
Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...
- jQuery css,position,offset,scrollTop,scrollLeft用法
jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...
随机推荐
- Jdon框架开发指南
Jdon框架快速开发指南 开发主要步骤如下: JdonFramework6.0以上两步开发见这里. 快速配置指南 新增/查询/修改/删除(CRUD); 批量查询和分页显示 本文Step By Step ...
- (89C51)定时器计时1s
unsigned ; void initT1() { EA=; TH1=0xDC; TL1=0X00; TMOD=0x10; TR1=; ET1=; } { TH1=0xDC; TL1=0X00; c ...
- Ubuntu创建、删除文件与目录
"~"代表了用户主目录,即/home/帐户名.所以"/home/jv/下载"="~/下载" 创建文件和目录(文件夹) touch filen ...
- 超赞网页背景效果-canvas-nest.js
canvas-nest.js 是 canvas 上绘制的蜂窝状网站背景. 引入的时候的注意事项:js加载的时候需要保证body已经加载: 一个简单的demo: <!DOCTYPE html> ...
- 拿来之笔 希望铭记 笔记 出处 http://www.jianshu.com/p/acb8885283dc
最近有机会对不同岗位的应聘者进行面试,其中有架构师.技术经理.开发岗位.谈谈几个印象深刻的. 面试者一,女性.重点大学硕士,从事软件技术工作十四年,应聘架构师岗位.按照套路问了下对于软件架构的认识和理 ...
- java模拟数据库缓存
实现缓存一些数据到本地,避免重复查询数据库,对数据库造成压力,代码如下: package threadLock; import java.util.HashMap; import java.util. ...
- markdown 自定义一个锚点
//自定义锚点 s "m[": function mlink( text ) { var orig = String(text); // Inline content is pos ...
- HTML中判断手机是否安装某APP，跳转或下载该应用
有些时候在做前端输出的时候,需要和app的做些对接工作.就是在手机浏览器中下载某app时,能判断该用户是否安装了该应用.如果安装了该应用,就直接打开该应用:如果没有安装该应用,就下载该应用.那么下面就 ...
- oc加载动态图片
NSString *name = @"qianming.gif"; NSString *filePath = [[NSBundle bundleWithPath:[[NSBundl ...
- c#中，委托Func的简单实践
c# 委托Func的简单实践最近才真正的接触委托,所以针对Func类型的委托,做一个实践练习. 首先说一些我对委托的初级理解:"就是把方法当做参数,传进委托方法里". 我平时用到的 ...