使用CSS+JavaScript或純js實現(xiàn)半透明遮罩效果的實例分享
更新時間：2016年05月09日 17:53:48 作者：hbxiao135
這篇文章主要介紹了使用CSS+JavaScript或純js實現(xiàn)半透明遮罩效果的實例分享,編寫半透明遮罩層時要注意定位問題、不要滿屏遮罩,需要的朋友可以參考下
CSS+JavaScript
實現(xiàn)原理:
創(chuàng)建一個滿屏的div，使用絕對定位，這樣的話它就可以脫離文檔流，對其他的元素不會產(chǎn)生影響，并且將其設(shè)置為半透明狀態(tài)，當(dāng)然這個透明度可以隨便調(diào)的，同時創(chuàng)建一個login元素，它也使用絕對定位，并將其z-index屬性值大于面屏的div，這個時候它就不會被滿屏div遮蓋。在默認(rèn)狀態(tài)下這兩個div的display屬性值是none。當(dāng)點擊相應(yīng)的按鈕可以更改他們的display屬性值。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://m.fzitv.net/" />
<title>CSS如何實現(xiàn)彈出一個全屏灰黑色透明遮罩效果-腳本之家</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">點擊關(guān)閉</button></div>
<div class="content">腳本之家歡迎您，<button id="bt">點擊彈出遮罩</button></div>
</body>
</html>
以上實現(xiàn)了基本的遮罩功能，當(dāng)點擊彈出遮罩，會彈出一個對象，當(dāng)點擊關(guān)閉，遮罩效果消失。
純JavaScript：
實現(xiàn)效果：彈出一個窗口的時候，窗口后面的頁面變暗，并且不能操作。
難點：因為div層是不能把select控件遮住的，所以要特殊處理，方法兩種，一種是在彈出窗口下面加一層iframe來遮住select；第二種是所以要在彈出的時候，先把select控件隱藏，這里選擇第二種方法。
實現(xiàn)原理：在頁面上和彈出窗口中間加一個半透明的層，把頁面的內(nèi)容覆蓋掉 。
代碼：
<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();">關(guān)閉</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>
<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">關(guān)鍵字：</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" height="9" width="9"></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="#">關(guān)于搜鋪</a> | <a class=b href="#" target=_blank>業(yè)務(wù)合作</a> | <a class="toplink" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.sopull.com');return false;" >設(shè)為首頁</a> | <a class="toplink" onClick="javascript:window.external.addFavorite('http://www.sopull.com/','搜鋪網(wǎng)-中國最大店鋪搜索引擎')" >加入收藏</a> </td>
</tr>
<tr>
<td align="center" height="30">©2007 搜鋪網(wǎng) 粵ICP備07006767號</td>
</tr>
</tbody>
</table>
相關(guān)文章
JS中關(guān)于ES6?Module模塊化的跨域報錯問題解決
這篇文章主要介紹了JS中關(guān)于ES6?Module模塊化的跨域報錯,ES6模塊化提供了export命令和import?命令，對于模塊的導(dǎo)出和引入，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)消息對話框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
使用JavaScript實現(xiàn)一個交互式音樂播放器
JavaScript,作為前端開發(fā)的重要語言,可以實現(xiàn)許多復(fù)雜的功能,在這篇文章中,我們將一起創(chuàng)建一個交互式的音樂播放器,快跟隨小編一起學(xué)習(xí)一下吧2024-01-01
很棒的JavaScript選項卡切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
JS/FLASH實現(xiàn)復(fù)制代碼到剪貼板(兼容所有瀏覽器)
使用javascript來寫復(fù)制到剪貼板的代碼，一般都是瀏覽器不兼容的。所以采用flash的方式，模擬一個層，再來復(fù)制，就可以做到全部瀏覽器都適用，具體實現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)下拉選項卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
JavaScript日期工具類DateUtils定義與用法示例
這篇文章主要介紹了JavaScript日期工具類DateUtils定義與用法,涉及javascript針對日期時間的獲取、轉(zhuǎn)換、比較、運算等相關(guān)操作技巧,需要的朋友可以參考下2018-09-09
獲取頁面高度，窗口高度，滾動條高度等參數(shù)值getPageSize,getPageScroll
獲取頁面高度，窗口高度，滾動條高度等參數(shù)值getPageSize,getPageScroll...2006-09-09
原生js實現(xiàn)shift/ctrl/alt按鍵的獲取
小測試shift、ctrl、alt按鍵的獲取，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
在使用JSON格式處理數(shù)據(jù)時應(yīng)該注意的問題小結(jié)
這篇文章主要介紹了在使用JSON格式處理數(shù)據(jù)時應(yīng)該注意的問題，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-05-05