div+css遮罩层
曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html
我想实现的效果没有上面那么多,仅仅出现一个灰蒙蒙的div层就可以了,所以做了一些改动.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DIV CSS遮罩层</title>
<script language="javascript" type="text/javascript">
function showdiv() {
document.getElementById("bg").style.display = "block";
}
function hidediv() {
document.getElementById("bg").style.display = 'none';
}
</script>
<style type="text/css">
#bg{ display: none;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background-color: grey;
z-index:1;
-moz-opacity: 0.7; /*不知道有啥用*/
opacity:0.70; /*不知道有啥用*/
filter: alpha(opacity=10); /*这个是真正起作用的*/
}
</style>
</head>
<body>
<input id="btnshow" type="button" value="Show" onclick="showdiv();"/><br/><br/>
<input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
<div id="bg"></div>
</body>
</html>
div+css遮罩层的更多相关文章
- div+css 遮罩层
CSS样式部分: ---------------------------------- <style type="text/css">#loading-mask{ ...
- CSS遮罩层的实现
偶然发现自己原来写了一个CSS遮罩层,虽然这个东西没什么技术含量,但如果本人离开公司后又遇见此类问题,那么可能又得花些时间来找资料了.所以决定还是把它记下来吧. 直接上代码吧. 第一步,html代码: ...
- 利用div实现遮罩层效果
利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...
- 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添加遮罩层，并且带有加载中的小旋转图片
话不多说,先上代码,其实还是比较简单的 $("<div id='shade' style='opacity:0.85;background:white'></div> ...
- 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 ...
- 子div作为遮罩层
效果图: 子div的代码:
随机推荐
- 2dx关于js响应layer触摸消息的bug
cocos2dx关于js响应layer触摸消息的bug cocos2d-x 3.7 问题描述: 目前这个版本中(3.7),c++层的layer触摸消息只能通过消息的方式发送给js,不能像lua一样直接 ...
- [HTML] Google IE-x.js 解决IEx与W3C标准的冲突
如果分别用IE5.IE6.IE7浏览同一个网页,将可能出现不一样的效果.这是它们之间对CSS的解析选择器不一样或错误和个别bug所导致.为了解决这些错误和bug.我们不得不找到一个能平衡于它们之间的解 ...
- Photoshop笔记一
Photoshop界面认识 Photoshop界面认识 区域划分 工作 (快捷键) 功能键 常用键: 新建图层 剪切并原位粘贴 建立图层组合 合并图层 课程练习讲解 区域划分
- SQL查询中的in与join效率比较
大多数情况下,程序员比较喜欢使用in来查询符合某些条件的数据,最近在查询某个角色有哪些用户的方法中,使用了in语句: ) FROM baseuser AND BaseUser.Id IN (SELEC ...
- Hadoop学习笔记(5) ——编写HelloWorld(2)
Hadoop学习笔记(5) ——编写HelloWorld(2) 前面我们写了一个Hadoop程序,并让它跑起来了.但想想不对啊,Hadoop不是有两块功能么,DFS和MapReduce.没错,上一节我 ...
- 精通CSS高级Web标准解决方案（1-1选择器）
设计代码的结构 使用有意义的标记 css可以控制页面的外观并将表现与内容分隔开. 在分配ID与类名时尽量保证有意义且与表现无关. div可以对块级元素进行分组,而span可以对行内元素进行分组或标识. ...
- nginx 代理服务器 502错误
在centos系统下,nginx做代理服务器总是出现502错误,百度各种搜索,出来的答案基本都是一样的,也不知道大家 从哪抄的,问题也没有解决,最后还是从谷歌找到的答案: 总归还是centos系统的问 ...
- [转]使用 HTML5 索引型数据库的待办事项简要列表
本文转自:http://www.html5rocks.com/zh/tutorials/indexeddb/todo/ <!DOCTYPE html><html> <h ...
- hdu-5692 Snacks(dfs序+线段树)
题目链接: Snacks Problem Description 百度科技园内有n个零食机,零食机之间通过n−1条路相互连通.每个零食机都有一个值v,表示为小度熊提供零食的价值. 由于零食被频繁的 ...
- xcode6 真机运行报错 Command /usr/bin/codesign failed with exit code 1
解决方法: 百度下载‘iphone配置实用工具’, 打开此软件之后,选择预配置描述文件, 选中iphone过期和重复的描述文件,按delete键删除.然后重启xcode即可