JS+HTML5实现半透明遮罩层弹框：解决内容跟随透明及滚动问题

作者：白露时间：2026-10-22 06:00:55浏览：552

本文介绍如何使用JS和HTML5实现半透明遮罩层弹框效果。针对常见误区，详细解析了CSS中opacity属性导致子元素整体透明的问题，并提供使用rgba()颜色值修正的方案。同时，通过设置position为fixed解决遮罩层内内容滑动异常，附带完整代码示例供参考。

半透明遮罩层弹框实现概述

点击按钮后，页面会出现一个半透明的遮罩层弹框，用于引导用户发表之前的观点或愁绪。

解决子元素跟随透明的误区

在实现过程中，常遇到一个典型问题：当遮罩层设置为半透明时，其内部的弹框内容也会随之变得半透明，导致视觉效果不佳，令人感到困扰。

半透明遮罩层弹框实现概述

造成这一问题的原因通常在于CSS样式的编写方式。

半透明遮罩层弹框实现概述

正确的做法是避免对父容器使用opacity属性，而是通过其他方式控制透明度。

半透明遮罩层弹框实现概述

这里需要理解几个关键参数的含义：RGB代表红、绿、蓝三种颜色通道，例如数值212, 0, 0表示这三种颜色的具体混合值。最后一个参数0.5用于指定透明度，其中1代表完全不透明，0代表完全透明。

实现内部内容滑动与定位修复

另一个值得关注的功能是半遮罩层内部的内容支持上下滑动，这种交互体验颇具趣味性。

要实现内容可滑动且不随遮罩层位置变化而错乱，只需将半遮罩层的position属性设置为fixed，这样内部内容就能保持正常状态。

接下来展示具体的代码实现部分。

完整代码示例


<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }

 .tip{
 text-align: center;
 position: absolute;
 height: 100%;
 width: 100%;
 background-color: rgba(90, 90, 90, 0.5);
 z-index: 99999;
 }
 
 .collectSucc{
 position: fixed;
 height: auto;
 width: 70%;
 background-color: #ffffff;
 margin-left: 15%;
 margin-top: 50%;
 }
 
 .collectSucc_top{
 color: #666666;
 font-size: 12px;
 }
 
 .collectSucc_top img{
 width: 60px;
 margin-top: 20px;
 }
 
 .collectSucc_buttom{
 margin-top: 20px;
 height: 40px;
 line-height: 40px;
 background-color: #2d99f5;
 color: #FFFFFF;
 font-size: 13px;
 }
 </script>
 
 </head>

 <body>
 <div class="tip">
 <!--收款成功-->
 <div class="collectSucc">
 <div class="collectSucc_top">
 <img src="../../img/tip.png" />
 <div>抢单失败，试试其他行程吧！</div>
 </div>
 <div class="collectSucc_buttom">
 我知道了
 </div>
 </div>
 </div>
 你好 我叫欧琪 啊哈哈 
 
 </body>

</html>