遮盖层实现（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 ...
随机推荐
- win7、win8.1淡绿色护眼模式设置
Win7设置: 右击桌面 -> 个性化 -> 窗口颜色 -> 高级外观设置 选中 -> 项目:窗口 颜色:其他 修改:色调 饱和度 亮度 红 绿 蓝 添加到自定义 ...
- mysql数据库主从搭建
一.最近一直在学习mysql的东西,刚好看到mysql如何搭建主从数据库,搜集了很多资料后大致了解了mysql主从复置的原理.以下是我的理解: 举例master为主数据库,slave为从数据库. sl ...
- PNG文件转png8
png8比普通png图片会小很多,所以在开发中为了是图片加载速度更快我们可以把Png图片都转成png8 首先添加 ImageProcessor 包 private byte[] ConvertTo ...
- LeetCode 392. Is Subsequence
Given a string s and a string t, check if s is subsequence of t. You may assume that there is only l ...
- Tiny6410之NAND FLASH驱动
一.NAND FLASH的特点 S3C6410的NAND FLASH控制器有如下特点 1.自导入模式:复位后,引导代码被送入到8KB的STEPPINGSTONE中,引导代码移动完毕,引导代码将在STE ...
- 用CSS实现文本框尖角
经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊! 那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: & ...
- POJ 1118 Lining Up
枚举,排序. 先将所有点按双关键字排序,然后枚举线的顶点$P$,剩余的点以$P$为中心进行极角排序,可以取个$gcd$,这样一样的点就排在一起了,然后统计一下更新答案. #pragma comment ...
- Java 序列化 JDK序列化总结
Java 序列化 JDK序列化总结 @author ixenos Java序列化是在JDK 1.1中引入的,是Java内核的重要特性之一.Java序列化API允许我们将一个对象转换为流,并通过网络发送 ...
- 各种文件的ContentType
CONTENT_TYPE = { 16 '.load': 'text/html', 17 '.123': 'application/vnd.lotus-1-2-3', 18 '.3ds': 'imag ...
- NOIP2015-普及组复赛-第一题-金币
题目描述 Description 国王将金币作为工资,发放给忠诚的骑士.第一天,骑士收到一枚金币:之后两天(第二天和第三天),每天收到两枚金币:之后三天(第四.五.六天),每天收到三枚金币:之后四天( ...