ホームページ > 記事 > ウェブフロントエンド > CSS JavaScript または pure js を使用して半透明のマスク効果を実現する例の共有_javascript スキル
CSS JavaScript または pure js を使用して半透明のマスク効果を実現する例の共有_javascript スキル
- WBOYオリジナル
- 2016-05-16 09:00:282091ブラウズ
css javascript
実装原則:
フルスクリーンの div を作成し、ドキュメントフローから切り離して他の要素に影響を与えないように絶対配置を使用し、半透明の状態に設定します。もちろん、この透明度は任意に調整できます。同時にログインを作成します。要素では、絶対配置も使用され、その z-index 属性値が画面上の div よりも大きくなります。この時点では、フルスクリーン div にはカバーされません。デフォルトでは、これら 2 つの div の表示属性値は none です。対応するボタンをクリックすると、表示属性値を変更できます。
<!doctype html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<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 レイヤーは選択コントロールをカバーできないため、特別な処理が必要です。方法は 2 つあります。1 つは、ポップアップ ウィンドウの下に iframe のレイヤーを追加して選択をカバーすることです。2 つ目は、ポップアップ ウィンドウの下にある iframe のレイヤーを選択コントロールをカバーします。まず選択コントロールを非表示にし、ここで 2 番目の方法を選択します。
実装原則: ページとポップアップ ウィンドウの間に半透明のレイヤーを追加して、ページのコンテンツをカバーします。
コード:
<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="http://www.sopull.com/Images/Index/logo.gif" style="max-width:90%" style="max-width:90%" alt="CSS JavaScript または pure js を使用して半透明のマスク効果を実現する例の共有_javascript スキル" ></p>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td height="10" style="color:#666666;font-size:13px"> </td>
</tr>
</tbody>
</table>
<table bgcolor="#e1e1e1" border="0" cellpadding="0" cellspacing="1" height="85" width="650">
<tbody>
<tr>
<td align="center" bgcolor="#f9f9f9"><table height=50 cellspacing=0 cellpadding=0 width=600 style="margin-top:20px">
<FORM name="f" action="http://www.sopull.com/ShopList.asp">
<tbody>
<tr>
<td class="searchbar_word">关键字：</td>
<td width="241"><input type="text" name="k" size=30 /></td>
<td align=middle width=101 class="searchbar_word">所在地：</td>
<td align=middle width=97 id="cn"><script language="javascript" src="http://www.sopull.com/Inc/Js/ListCity.asp?CityName=北京市"></script></td>
<td align=middle width=95><input name="s" type=submit value=" 搜 铺 "></td>
</tr>
</form>
<tr>
<td width="64" height="30"> </td>
<td colspan="4" valign="middle" class="search_text">例如：餐厅；电器；超市
</table></td>
</tr>
</tbody>
</table>
</center>
<p align="center"> </p>
<p align="center"><a href="javascript:Open();">打开遮罩</a></p>
<p align="center"> </p>
<table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<!-- <tr>
<td align="center" background="Images/Index/line_2.gif" width="580"><img src="Images/Index/line_2.gif" style="max-width:90%" style="max-width:90%" alt="CSS JavaScript または pure js を使用して半透明のマスク効果を実現する例の共有_javascript スキル" ></td>
</tr>-->
<tr>
<td class="link" align="center" height="30"><a href="#" target=_blank><font color="#FF6600">免费提交店铺</font></a> | <a class="toplink" href="#">店铺推广</a> | <a class="toplink" href="#">关于搜铺</a> | <a class=b href="#" target=_blank>业务合作</a> | <a class="toplink" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.sopull.com');return false;" href="http://www.sopull.com/#">设为首页</a> | <a class="toplink" onClick="javascript:window.external.addFavorite('http://www.sopull.com/','搜铺网-中国最大店铺搜索引擎')" href="http://www.sopull.com/#">加入收藏</a> </td>
</tr>
<tr>
<td align="center" height="30">©2007 搜铺网 粤ICP备07006767号</td>
</tr>
</tbody>
</table>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。