遮盖层实现（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 ...
随机推荐
- FZU 2089 数字游戏
Problem 2089 数字游戏 Problem Description 现在,给你2个整形数字A和B.你的任务就是计算出A+B的结果C后,统计C中数字5出现的次数. Input 输入数据第一行 ...
- HDU 2045 不容易系列之(3)—— LELE的RPG难题(递归/动态规划)
不容易系列之(3)—— LELE的RPG难题 Problem Description 人称“AC女之杀手”的超级偶像LELE最近忽然玩起了深沉,这可急坏了众多“Cole”(LELE的粉丝,即" ...
- Python快捷键
IDLE默认不能显示行号,使用ALT+G 跳到对应行号,在右下角有显示光标所在行.列. ALT+P 上一个历史输入内容. ALT+N 下一个历史输入内容. IDLE中按F5可以运行代码.
- 为什么switch...case语句比if...else执行效率高
在C语言中,教科书告诉我们switch...case...语句比if...else if...else执行效率要高,但这到底是为什么呢?本文尝试从汇编的角度予以分析并揭晓其中的奥秘. 第一步,写一个d ...
- Linux的一些简单命令(二)
1.查看防火墙状态:service iptables status 2.开启防火墙:service iptables start 3.关闭防火墙:service iptables stop 4.创建目 ...
- NGINX----源码阅读---have配置脚本
/auto/have have配置脚本负责在$NGX_OBJS/ngx_auto_config.h定义宏 # Copyright (C) Igor Sysoev # Copyright (C) Ngi ...
- PHP 在 Nginx 下主动断开连接 Connection Close 与 ignore_user_abort 后台运行
这两天弄个PHP调用 SVN 同步 update 多台服务器更新的程序,为了避免 commit 的时候不会被阻塞卡半天得想个办法只请求触发,而不需要等待程序 update 完成返回结果这样耗时太长,所 ...
- unittest框架概要
unittest是Python语言自带的单元测试框架,原名PyUnit. 认识unittest 在unittest框架中有4个重要概念:test fixture.test case.test suit ...
- 浙大pat1013题解
1013. Battle Over Cities (25) 时间限制 400 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue It ...
- Centos 下安装Zabbix Linux 客户端
今天在linux上安装了客户端,过程如下: (1)下载zabbix客户端软件 wget www.zabbix.com/downloads/2.0.3/zabbix_agents_2.0.3.linux ...