【第22期】观点:IT 行业加班,到底有没有价值?

JS+CSS简单实现DIV遮罩层显示隐藏

转载 2015年07月07日 16:53:53

<!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";
            document.getElementById("show").style.display ="block";
        }
function hidediv() {
            document.getElementById("bg").style.display ='none';
            document.getElementById("show").style.display ='none';
        }
</script>
<style type="text/css">
        #bg{ display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.7;  opacity:.70;  filter: alpha(opacity=70);}
        #show{display: none;  position: absolute;  top: 25%;  left: 22%;  width: 53%;  height: 49%;  padding: 8px;  border: 8px solid #E8E9F7;  background-color: white;  z-index:1002;  overflow: auto;}
</style>
</head>
<body>
<input id="btnshow" type="button" value="Show" onclick="showdiv();"/>
<div id="bg"></div>
<div id="show">测试
<input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
</div>
</body>
</html>

Copy上面的代码到HTML页面即可查看效果。

原理比较简单,就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时,通过JS去控制两个DIV的样式:display='block' or display='none'.就可以实现DIV的显示和隐藏。

注意两个DIV的z-index,显示在最上面的DIV的z-index一定要比遮罩层的z-index大。








举报

相关文章推荐

Jquery超简单遮罩层实现代码

在开发中,为了避免二次提交,遮罩层的运用越来越普遍 找了很多
  • tolcf
  • tolcf
  • 2014-08-20 21:36
  • 73322

Spring 整合mybatis配置

Spring整合mybatis配置 Mybatis是ibatis的升级版,是一个基于java的持久层框架。Mybatis是支持普通SQL查询,存储过程和高级映射的优秀的持久层框架,Mybatis 消除...
  • tolcf
  • tolcf
  • 2016-03-10 11:21
  • 4475

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

mybatis-generator 代码自动生成工具

今天来介绍下怎么用mybatis-gennerator插件自动生成mybatis所需要的dao、bean、mapper xml文件,这样我们可以节省一部分精力,把精力放在业务逻辑上。 之前看过很多文章...
  • tolcf
  • tolcf
  • 2016-03-09 15:29
  • 36669

jQuery设置div居中及实现遮罩层

jquer设置div居中级实现遮罩层 这里主要讲遮罩层 web前端开发,写网站静态页面时经常遇到些遮罩层和设置div(物体)居中。 这里又我自己写的一个实例,提供参考。 一、效果图 效果图1: ...

JS 弹出遮罩层,内部为DIV

.mainlist{padding:10px;} .mainlist div {margin:0 5px 0 0;font-family:"宋体";font-size:12px;font-weigh...

html+css+js实现弹出框+遮罩层

最近看到好多童鞋都在找弹出框和遮罩层的实现。 先来说遮罩层是个神马? 其实就是你弹出个东西,然后其他地方变黑了一点。就像遮住了其他地方一样。 那么实现原理呢? 就是设置一个div,宽度,高度是屏幕...

jquery 打开网页自动弹出遮罩层或点击弹出遮罩层

弹出层:两种方式, 一是打开网页就自动弹出层 二是点击弹出 jQuery简便实现遮罩层--柯乐义 body { font-family:Arial, Helvetica, sans-...

jquery封装了一个简洁轻巧的可拖动可自定义样式的纯div+css带遮罩层的仿模态弹出框

最近封装上瘾,想起以前做的一个轻巧的弹出框,是样式和脚本分离的,于是重新封装了一下,把样式标签统一到js里了。 里面还有一些问题,但不影响使用,有兴趣的同学,可以参考完善下,有好的建议,请不吝赐教。

Jquery实现遮罩层,就是弹出DIV周围都灰色不能操作

Jquery遮罩层                  #BgDiv{background-color:#666666; position:absolute; z-index:99; left:...

自写jQuery插件,实现简单网页遮罩层/弹出层功能,兼容IE6、IE7

本屌丝最近工作要求重写网站所有代码,so...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能:...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)