css---遮罩层
<div id="body"> 显示页面的全部内容
<div id="open">打开弹框</div>
</div>
//页面的遮罩层
<div id="cover"></div>
//页面的弹出框
<div id="modal">
<div id="close">关闭弹框</div>
</div>
<script>
$(document).ready(function(){
$("#open").click(function() {
cover.style.display="block"; //显示遮罩层
modal.style.display="block"; //显示弹出层
})
$("#close").click(function() {
cover.style.display="none"; //隐藏遮罩层
modal.style.display="none"; //隐藏弹出层
})
})
</script>
#cover{
position:absolute;left:0px;top:0px;
background:rgba(, , , 0.4);
width:%; /*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/
height:%;
filter:alpha(opacity=); /*设置透明度为60%*/
opacity:0.6; /*非IE浏览器下设置透明度为60%*/
display:none;
z-Index:;
}
#modal{
position:absolute;
width:500px;
height:300px;
top:%;
left:%;
background-color:#fff;
display:none;
cursor:pointer;
z-Index:;
}
css---遮罩层的更多相关文章
- div+css遮罩层
曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html 我想实现的效果没 ...
- CSS遮罩层的实现
偶然发现自己原来写了一个CSS遮罩层,虽然这个东西没什么技术含量,但如果本人离开公司后又遇见此类问题,那么可能又得花些时间来找资料了.所以决定还是把它记下来吧. 直接上代码吧. 第一步,html代码: ...
- CSS 遮罩层、滑出页面
<style> .panel_bak { position:fixed; bottom:0; display:none; width:100%; margin:0px; padding:5 ...
- CSS遮罩层简易写法
现在很多站点弹出框,都需要一个遮罩层.写法很多,以下是我比较喜欢的一种: .box{ position:absolute; top:0; bottom:0; left:0; right:0; ba ...
- div+css 遮罩层
CSS样式部分: ---------------------------------- <style type="text/css">#loading-mask{ ...
- css遮罩层
父元素:position:fixed; 让子元素居中对齐:position:absolute;top:0;bottom:0;left:0;right:0;margin:auto; <style& ...
- CSS遮罩层,全兼容
<script type="text/javascript"> $(function(){ $('#divLocker').css({ "position&q ...
- JS+CSS简单实现DIV遮罩层显示隐藏【转藏】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS+CSS简单实现DIV遮罩层显示隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery遮罩层插件
在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...
随机推荐
- js之正则的坑
首先给一个神奇的图: 我的反应,精分吧!一会儿true一会儿false的... 后来发现,把g去掉后就正常了,那这是为什么呢??lastIndex惹得鬼! 正文: lastIndex 全局正则表达是, ...
- loj#6074. 「2017 山东一轮集训 Day6」子序列(矩阵乘法 dp)
题意 题目链接 Sol 设\(f[i][j]\)表示前\(i\)个位置中,以\(j\)为结尾的方案数. 转移的时候判断一下\(j\)是否和当前位置相同 然后发现可以用矩阵优化,可以分别求出前缀积和逆矩 ...
- 2018 AI产业界大盘点
2018 AI产业界大盘点 大事件盘点 “ 1.24——Facebook人工智能部门负责人Yann LeCun宣布卸任 Facebook人工智能研究部门(FAIR)的负责人Yann LeCun宣布卸 ...
- geoserver发布瓦片,geoserver发布arcgis切片和geoserver发布金字塔切片
1 转https://www.jianshu.com/p/cf046ec1efd2,分享使用geoserver发布arcgis切片 2 转 http://www.it610.com/article/1 ...
- Android中将一个图片切割成多个图片
有种场景,我们想将一个图片切割成多个图片.比如我们在开发一个拼图的游戏,就首先要对图片进行切割. 以下是封装好的两个类,可以实现图片的切割.仅供参考和学习. 一个是ImagePiece类,此类保存了一 ...
- mybatis中:selectKey返回最近插入记录的id
<insert id="insert" parameterType="com.lls.model.Employee"> <!-- select ...
- asyncio异步IO--协程(Coroutine)与任务(Task)详解
摘要:本文翻译自Coroutines and Tasks,主要介绍asyncio中用于处理协程和任务的方法和接口.在翻译过程中,译者在官方文档的基础上增加了部分样例代码和示意图表,以帮助读者对文档的理 ...
- 【温故而知新】HTTP 报文
HTTP 报文是在 HTTP 应用程序之间发送的数据块.这些数据块以一些文本形式的元信息开头,这些信息描述了报文的内容及含义. 报文流 报文在客户端.服务器和代理之间的流动称为报文流. HTTP 使用 ...
- UDK命令
UDK命令行参数与控制台命令都是大小写不敏感的 命令行 udn中文 udn英文 全词大小写匹配,正则表达式,在c++代码中搜索减号开头的命令行参数(如:-BENCHMARK.-onethread等 ...
- 【原】Java学习笔记005 - 流程控制
package cn.temptation; public class Sample01 { public static void main(String[] args) { // 程序的流程控制(流 ...