关闭

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

1450人阅读 评论(0) 收藏 举报
分类:

<!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大。








2
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Jquery超简单遮罩层实现代码

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

用 js 实现“div的遮罩”效果

需求:点击“排序”按钮,生成div遮罩效果,如图: html代码:两个按钮 html代码:遮罩效果 排序 状态: 发文 收文 公文类型: 通知 公告 其中,id=bg 为...
  • hlbt0112
  • hlbt0112
  • 2016-09-13 15:22
  • 3482

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

jquer设置div居中级实现遮罩层 这里主要讲遮罩层 web前端开发,写网站静态页面时经常遇到些遮罩层和设置div(物体)居中。 这里又我自己写的一个实例,提供参考。 一、效果图 效果图1: 效果图2: 这两张图片看是没有什么区别,可以说做起来可就没那么容易咯(这个问题我可是弄了半天呢...
  • csdn_chenli
  • csdn_chenli
  • 2016-11-17 17:59
  • 3152

在HTML中实现和使用遮罩层

Web页面中使用遮罩层,可防止重复操作,提示loading;也可以模拟弹出模态窗口。 实现思路:一个DIV作为遮罩层,一个DIV显示loading动态GIF图片。在下面的示例代码中,同时展示了如何在iframe子页面中调用显示和隐藏遮罩层。 示例代码: index.html HTML遮罩层...
  • ale2012
  • ale2012
  • 2016-03-25 00:52
  • 5936

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

最近看到好多童鞋都在找弹出框和遮罩层的实现。 先来说遮罩层是个神马? 其实就是你弹出个东西,然后其他地方变黑了一点。就像遮住了其他地方一样。 那么实现原理呢? 就是设置一个div,宽度,高度是屏幕视口那个大(当然,如果你的document超出了window的大小,那么设置的时候最好还是用docu...
  • yy839126257
  • yy839126257
  • 2015-04-17 14:45
  • 3108

遮罩,在指定元素上进行遮罩

web前段,遮效果罩,在指定元素上进行遮罩,解决局部遮罩的问题。
  • u013490585
  • u013490585
  • 2015-01-05 15:51
  • 861

关于移动端css+js解决遮罩问题方法。

今天找到一种解决方式:当一个页面超过屏幕的时候,会出现滚动,但是当我们弹出遮罩时,会发现还是页面还是可以滚动。 有2种情况: 第一种:就是在弹框的遮罩上有滚动(比如说滚动列表),就是说页面一个滚动,弹框也有一个滚动。 解决方法:把整个页面用一个div(当然也可以用别的)包起来,在点击页面时,给div...
  • Iamgoodgilr
  • Iamgoodgilr
  • 2016-09-08 15:42
  • 1342

.net MVC框架下利用css+js实现遮罩效果

前一篇文章中http://blog.csdn.net/luanzheng_365/article/details/70455933,实现的loading效果的显示上进行优化,形成一个遮罩,将loading显示在遮罩上,并调整遮罩属性,使得遮罩与页面滚动可以适配.运行结果页面如下: 代码修改如下: ...
  • luanzheng_365
  • luanzheng_365
  • 2017-04-23 16:53
  • 279

遮罩层有滚动条时解决方法

在弹出层后面的 遮罩层,因为有滚动条,导致滚动条下面不可视区域没有遮罩层,解决方式是加的css。 //显示灰色JS遮罩层 function showBg(ct,content){ var bH=$(document).height(); var bW=$("...
  • u013471586
  • u013471586
  • 2016-11-24 17:09
  • 2479

JS 弹出遮罩层,内部为DIV

.mainlist{padding:10px;} .mainlist div {margin:0 5px 0 0;font-family:"宋体";font-size:12px;font-weight:400;color:#dd...
  • a5251199
  • a5251199
  • 2015-11-12 11:36
  • 934
    个人资料
    • 访问:779555次
    • 积分:11532
    • 等级:
    • 排名:第1542名
    • 原创:297篇
    • 转载:488篇
    • 译文:0篇
    • 评论:44条
    最新评论