使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享

网络编程 2024/5/19 佚名

3 2 1

CSS+JavaScript
实现原理:
创建一个满屏的div，使用绝对定位，这样的话它就可以脱离文档流，对其他的元素不会产生影响，并且将其设置为半透明状态，当然这个透明度可以随便调的，同时创建一个login元素，它也使用绝对定位，并将其z-index属性值大于面屏的div，这个时候它就不会被满屏div遮盖。在默认状态下这两个div的display属性值是none。当点击相应的按钮可以更改他们的display属性值。

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

<meta name="author" content="https://www.jb51.net/" /> 

<title>CSS如何实现弹出一个全屏灰黑色透明遮罩效果-</title> 

<style type="text/css"> 

* 

{ 

 margin:0px; 

 padding:0px; 

} 

.zhezhao 

{ 

 width:100%; 

 height:100%; 

 background-color:#000; 

 filter:alpha(opacity=50); 

 -moz-opacity:0.5; 

 opacity:0.5; 

 position:absolute; 

 left:0px; 

 top:0px; 

 display:none; 

 z-index:1000; 

} 

.login 

{ 

 width:280px; 

 height:180px; 

 position:absolute; 

 top:200px; 

 left:50%; 

 background-color:#000; 

 margin-left:-140px; 

 display:none; 

 z-index:1500; 

} 

.content 

{ 

 margin-top:50px; 

 color:red; 

 line-height:200px; 

 height:200px; 

 text-align:center; 

} 

</style> 

<script type="text/javascript"> 

window.onload=function() 

{ 

 var zhezhao=document.getElementById("zhezhao"); 

 var login=document.getElementById("login"); 

 var bt=document.getElementById("bt"); 

 var btclose=document.getElementById("btclose"); 

 bt.onclick=function() 

 { 

 zhezhao.style.display="block"; 

 login.style.display="block"; 

 } 

 btclose.onclick=function() 

 { 

 zhezhao.style.display="none"; 

 login.style.display="none"; 

 } 

} 

</script> 

</head> 

<body> 

 <div class="zhezhao" id="zhezhao"></div> 

 <div class="login" id="login"><button id="btclose">点击关闭</button></div> 

 <div class="content">欢迎您，<button id="bt">点击弹出遮罩</button></div> 

</body> 

</html>

以上实现了基本的遮罩功能，当点击弹出遮罩，会弹出一个对象，当点击关闭，遮罩效果消失。

纯JavaScript：
实现效果：弹出一个窗口的时候，窗口后面的页面变暗，并且不能操作。

难点：因为div层是不能把select控件遮住的，所以要特殊处理，方法两种，一种是在弹出窗口下面加一层iframe来遮住select；第二种是所以要在弹出的时候，先把select控件隐藏，这里选择第二种方法。

实现原理：在页面上和弹出窗口中间加一个半透明的层，把页面的内容覆盖掉。

代码：

<script language="javascript"> 
function Open() 
{ 
 //隐藏select控件 
 DispalySelect(0); 
 //显示遮罩层 
 document.getElementById("divPageMask").style.display="block"; 
 //处理遮罩层 
 resizeMask(); 
 window.onResize = resizeMask; 
 //显示弹出窗口 
 document.getElementById("divOpenWin").style.display="block"; 
} 
function Close() 
{ 
 //显示select控件 
 DispalySelect(1); 
 //处理遮罩层 
 divPageMask.style.width = "0px"; 
 divPageMask.style.height = "0px"; 
 divOpenWin.style.display = "none"; 
 window.onResize = null; 
 
 document.getElementById("divOpenWin").style.display="none"; 
} 
//页面遮罩 
function resizeMask() 
{ 
 divPageMask.style.width = document.body.scrollWidth; 
 divPageMask.style.height = document.body.scrollHeight; 
 divOpenWin.style.left = ((document.body.offsetWidth - divOpenWin.offsetWidth) / 2); 
 divOpenWin.style.top = ((document.body.offsetHeight - divOpenWin.offsetHeight) / 2); 
} 
function DispalySelect(val) 
{ //显示和隐藏select控件 
 var dispalyType; 
 var arrdispalyType=["hidden","visible"]; 
 var arrObjSelect=document.getElementsByTagName("select"); 
 for (i=0;i<arrObjSelect.length;i++) 
 { 
 arrObjSelect[i].style.visibility=arrdispalyType[val]; 
 } 
} 
</script> 
 
<style type="text/css"> 
.body,td{font-size:12px} 
#divPageMask{background-color:white; filter:alpha(opacity=50);left:0px;position:absolute;top:0px;} 
#divOpenWin{background-color:#EEEEEE;position: absolute;left:0px;top:0px;display: none;z-index:50; width:300px;height:150px} 
</style> 
 
<div id="divPageMask"></div> 
<div id="divOpenWin"><center><a href="javascript:Close();">关闭</a></center></div> 
<label></label> 
<center> 
 <table border="0" cellpadding="0" cellspacing="0" width="650"> 
 <tbody> 
 <tr> 
 <td colspan="2" align="center" height="90"><p><img src="/UploadFiles/2021-04-02/logo.gif">

CSS,JavaScript,半透明,遮罩,遮罩层,div

标签：

CSS,JavaScript,半透明,遮罩,遮罩层,div

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享”

使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享

暂无“使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240519

使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享

CSS,JavaScript,半透明,遮罩,遮罩层,div

JavaScript编写点击查看大图的页面半透明遮罩层效果实例

Bootstrap模仿起筷首页效果

评论“使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接