实现局部遮罩与关闭

桃扇骨 2021-11-23 06:50 307阅读 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 条评论，307人围观）

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

相关阅读

相关 IVIEW实现遮罩

因为左边表格右边操作的原因在新增的时候表格时候需要将左边内容遮罩 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

超、凢脫俗/ 2023年10月05日 12:51/ 0 赞/ 7 阅读

相关遮罩层

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

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

相关 vue的关闭遮罩层

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

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

相关 uniapp实现一个遮罩层

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

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

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

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

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

相关 CSS实现遮罩层

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

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

相关遮罩

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

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

相关实现遮罩效果

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

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

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

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

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

相关实现局部遮罩与关闭

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

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