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的代码:
随机推荐
- [Java] JAVA程序员您需要学习的25个标准
(1) 你需要精通面向对象分析与设计(OOA/OOD).涉及模式(GOF,J2EEDP)以及综合模式.你应该了解UML,尤其是class,object,interaction以 及statediagr ...
- 移动的rem自适应
(function (doc, win) { var docEl = doc.documentElement, //html resizeEvt = 'orientationchange' in wi ...
- Json格式理解
json格式中共有三个重要符号"[","{",":" 中括号和花括号的唯一区别就是:中括号不需要key,花括号必须有key
- 重构19-Extract Factory Class（提取工厂类）
在代码中,通常需要一些复杂的对象创建工作,以使这些对象达到一种可以使用的状态.通常情况下,这种创建不过是新建对象实例,并以我们需要的方式进行工作.但是,有时候这种创建对象的需求会极具增长,并且混淆了创 ...
- Oracle基础 TO_CHAR函数参考(转)
Postgres 格式化函数提供一套有效的工具用于把各种数据类型(日期/时间,int,float,numeric)转换成格式化的字符串以及反过来从格式化的字符串转换成原始的数据类型. 注意:所有格式化 ...
- Oracle 11g XE 试用记录
安装之前先删除系统环境变量中的oracle_home等配置(如果存在的话): 如果安装后出现Web管理界面不能访问或者数据库不能连接的情况,卸载再多安装几次可能就正常了.状态不正常时,可以使用 C:\ ...
- HTTPS的工作原理
参考自<图解HTTP> 果壳网http://www.guokr.com/post/114121/ HTTPS的工作原理 增加了一层:HTTPS流程:应用层 HTTP->SSL/TLS ...
- hdu 4055 动态规划
#include<map> #include<set> #include<cmath> #include<queue> #include<cstd ...
- hihocoder 1082 然而沼跃鱼早就看穿了一切(字符串替换）
时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 fjxmlhx每天都在被沼跃鱼刷屏,因此他急切的找到了你希望你写一个程序屏蔽所有句子中的沼跃鱼(“marshtomp”,不区 ...
- Angularjs 中使用指令绑定点击事件
项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...