js简单遮罩效果(可解决select)

最新推荐文章于 2023-09-24 12:34:22 发布

ava_chc

最新推荐文章于 2023-09-24 12:34:22 发布

阅读量304

点赞数

文章标签： HTML

本文链接：https://blog.youkuaiyun.com/ava_chc/article/details/83764730

版权

本文介绍了一种在网页中实现遮罩效果的方法，通过添加半透明层使页面变暗并不可交互，同时解决了Select控件被遮挡的问题。具体实现包括使用JavaScript动态调整遮罩层大小、显示与隐藏Select控件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

难点：因为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>

下面是HTML例子


<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="http://www.sopull.com/Images/Index/logo.gif" height="60" width="250"></p>
 <p> </p>
 <p> </p></td>
 </tr>
 <tr>
 <td height="10" style="color:#666666;font-size:13px"> </td>
 </tr>
 </tbody>
 </table>
 </center>
<select><option>1<option>
<option>11<option>
<option>11<option>
</select>
<p align="center"> </p>
<p align="center"><a href="javascript:Open();">打开遮罩</a></p>

 </tbody>
</table>