实现局部遮罩与关闭

桃扇骨 2021-11-23 06:50 280阅读 0赞

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 //实现局部遮罩
     2 <script type="text/javascript">
     3     function Shade(){
     4         var s = document.getElementById("shade");
     5         s.style.display = "block";
     6     }
     7     function Display(){
     8         var d = document.getElementById("shade");
     9         d.style.display = "none";
    10     }
    11 </script>
    12 <style type="text/css">
    13 #box{
    14     width:400px;
    15     height:300px;
    16     position:relative;
    17     margin:0px auto;
    18     border:1px solid #000;
    19 }
    20 #shade{
    21     width:400px;
    22     height:300px;
    23     background-color:gray;
    24     position:absolute;
    25     z-index:999;
    26     left:0px;
    27     top:0px;
    28     -moz-opacity:0.5;/*Firefox*/
    29     opacity:0.5;/*Opera*/
    30     filter:alpha(opacity=50); /*IE*/
    31 }
    32 </style>
    33 </head>
    34 
    35 <body>
    36     <div id = "box">
    37         <a href = "javascript:Shade()">局部遮罩</a>
    38         <div id = "shade"></div>
    39     </div>
    40 <a href = "javascript:Display()">遮罩消失</a>
    41 </body>

转载于:https://www.cnblogs.com/zhouxy/archive/2012/08/01/2618899.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211122/6e97328fc27b49f79731c444b79c3a74.png

发表评论取消回复

表情：

评论列表（有 0 条评论，280人围观）

还没有评论，来说两句吧...

相关阅读

相关遮罩层

<view class="pop"> <view class="cont"> 内容 </view> </view> .

深藏阁楼爱情的钟/ 2023年01月11日 13:05/ 0 赞/ 322 阅读

相关 vue的关闭遮罩层

<transition name="fade"> <div class="mask" v-show="shareContShow" @click="

ゝ一世哀愁。/ 2022年12月06日 01:27/ 0 赞/ 354 阅读

相关 uniapp实现一个遮罩层

.mark{ position:absolute; height: 500rpx; color:

亦凉/ 2022年10月19日 12:43/ 0 赞/ 656 阅读

相关点击蒙版遮罩关闭弹窗

![在这里插入图片描述][9e998efa8a654190b92a54d9c7af83fe.png] [9e998efa8a654190b92a54d9c7af83fe.p

太过爱你忘了你带给我的痛/ 2022年08月29日 00:00/ 0 赞/ 217 阅读

相关 CSS实现遮罩层

<div id="main"> <button @click="open">open</button> <div cl

短命女/ 2022年05月26日 13:44/ 0 赞/ 327 阅读

相关遮罩

<div class =“modal-backdrop in”id =“loadingModal”style =“display：none; z-index：20000

系统管理员/ 2022年05月26日 00:19/ 0 赞/ 258 阅读

相关实现遮罩效果

<!DOCTYPE html> < html lang= "en"> < head> < meta charset= "UTF-8"> < meta name= "vi

客官°小女子只卖身不卖艺/ 2022年05月25日 02:46/ 0 赞/ 245 阅读

相关 iframe 遮罩 object

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] .my\_iframe \{ position: a

朴灿烈づ我的快乐病毒、/ 2022年01月16日 05:37/ 0 赞/ 306 阅读

相关点击遮罩层内容区域以外的区域，关闭遮罩层

html <div class="div1"> <dl class="div2"> 内容... </dl> </div> c

﹏ヽ暗。殇╰゛Y/ 2021年11月29日 16:36/ 0 赞/ 543 阅读

相关实现局部遮罩与关闭

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 1 //实现局部遮罩 2 <script t

桃扇骨/ 2021年11月23日 06:50/ 0 赞/ 281 阅读