遮盖层实现（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 ...
随机推荐
- Matlab最新的官方文档中文翻译
文章翻译的是Matlab最新的官方文档R2016b,可能后续如果我还有时间会继续翻译,希望能够帮到大家,翻译的不好请大家不要吐槽. Matlab官方文档地址:http://cn.mathworks.c ...
- （八）python的简单数据类型和变量
什么是数据类型? 程序的本质就是驱使计算机去处理各种状态的变化,这些状态分为很多种. 例如英雄联盟游戏,一个人物角色有名字,钱,等级,装备等特性,大家第一时间会想到这么表示 名字:德玛西亚------ ...
- [UWP小白日记-15]在UWP手机端实时限制Textbox的输入
说实话重来没想到验证输入是如此的苦逼的一件事情. 网上好多验证都是在输入完成后再验证,我的想法是在输入的时候就限制输入,这样我就不用再写代码来验证了 应为是手机端,所以不用判断其他非法字符,直 ...
- python自动化开发-2
1.python的数据类型之列表 列表是Python开发语言中最常见的数据类型之一,通过列表可以实现对数据的增删改等常用操作. 列表的定义:例子 names = ["Lucy",& ...
- 【NOIP2013】DAY1题解+代码
T1 傻逼快速幂,敲敲就过了. 我跟你们讲个笑话当时我以为这个数据范围过不了于是想出了求GCD再推规律什么的magic方法中途还咨询了某个学长. 然后怎么想都是不可做. ……直到我发现我昨年的代码一个 ...
- redis单主机多实例
假设我们服务器上面已经安装好了redis: 可参看:http://zlyang.blog.51cto.com/1196234/1834700 下面我们来配置redis单主机多实例: 我们首先拷贝两份文 ...
- python 主机宝
需求:开发一个主机批量管理系统,要求按saltstack方式执行命令 #!/usr/bin/env python3. # -*- coding:utf8 -*- import os,sys,pickl ...
- 什么是Bash Shell的内建(build in)命令
1.什么是build in命令: shell内建命令是指bash(或其它版本)工具集中的命令.一般都会有一个与之同名的系统命令,比如bash中的echo命令与/bin/echo是两个不同的命令,尽管他 ...
- 向量相加CUDA练习
#include<string.h> #include<math.h> #include<stdlib.h> #include<stdio.h> #de ...
- abap 一些小知识点的总结
创建包含结构或表的内表: DATA: BEGIN OF it_tab. INCLUDE TYPE/STRUCTURE name. name:结构名或者表名 DATA: num TY ...