遮盖层实现（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 ...
随机推荐
- WPF wpf scrollviewer 触屏滚动 窗体弹跳
触屏滚动实现 设置属性 在ScrollViewer的xaml代码那里加上 PanningMode="Both" 在ScrollViewer的xaml代码那里加上 Manipula ...
- 【锋利的Jquery】读书笔记十一
项目进度太赶,天天公司加班12小时,没时间看书充电.2016年再更新一篇吧.现在凌晨2点36分. 2017加油哦 jquery合适的选择器 $("#id") 无疑是最佳提高性能的方 ...
- dirty cow exp
公司搞底层的改了一下,说做到了几个不死机 /* * (un)comment correct payload first (x86 or x64)! * * $ gcc cowroot.c -o cow ...
- 相对协议-关于src里//开头的知识
"相对协议",也就是链接以 // 开头,前面去掉了 http: 或 https: 字样, 这样做的好处是浏览器能够根据你的网站所采用的协议来自动加载 CDN 上托管的文件!
- W: http://archive.ubuntukylin.com:10006/ubuntukylin/dists/xenial/InRelease: Signature by key 6CE35A4EBAB676094476BE7CD259B7555E1D3C58 uses weak digest algorithm (SHA1)
新装ubuntukylin 16.04,sudo apt-get update 时遇到如下问题: Hit:1 http://archive.ubuntukylin.com:10006/ubuntu ...
- 动作Action
/** * DelayTime延迟 * @param d Duration 延迟时间 */ auto delayTime = DelayTime::create(); sprite->runAc ...
- Java 多线程 笔记 转自http://www.cnblogs.com/lwbqqyumidi/p/3804883.html
多线程作为Java中很重要的一个知识点, 一.线程的生命周期及五种基本状态 关于Java中线程的生命周期,首先看一下下面这张较为经典的图: 上图中基本上囊括了Java中多线程各重要知识点.掌握了上图中 ...
- Jmeter（四）-断言/检查点
断言就类似LoadRunner中的检查点.对上一个请求返回的信息,做字符串.数据包大小.HTML.XML.图片等做判断,确保返回的信息的准确性. 添加响应断言:欢迎您 如果登陆页登陆成功,则后台会返回 ...
- glusterfs快速安装
因为公司ES02集群使用的是SSD磁盘做的raid0,为了保证存放文件的可靠性,即在ES02集群上部署了一套分布式文件系统glusterfs. 结构 ES11 含有gfs程序,并挂载gfs在 ...
- shell-逐行读取文件
代码: #!/bin/bash echo 方法1 while read line do echo $line; done < testdata echo "" echo 方法 ...