js實(shí)現(xiàn)在頁(yè)面上彈出蒙板技巧簡(jiǎn)單實(shí)用
更新時(shí)間：2013年04月16日 17:46:03 作者：
蒙板是兩個(gè)div，其中popWindow樣式的div用于遮住整個(gè)頁(yè)面并半透明，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)js蒙版有所幫助
蒙板是兩個(gè)div，其中popWindow樣式的div用于遮住整個(gè)頁(yè)面，并半透明。maskLayer 在popWindow上面，用于顯示蒙板的信息，比如“載入中……“
<html>
<head>
<style type="text/css">
.popWindow {
background-color:#9D9D9D;
width: 100%;
height: 100%;
left: 0;
top: 0;
filter: alpha(opacity=50);
opacity: 0.5;
z-index: 1;
position: absolute;
}
.maskLayer {
background-color:#000;
width: 200px;
height: 30px;
line-height: 30px;
left: 50%;
top: 50%;
color:#fff;
z-index: 2;
position: absolute;
text-align:center;
}
</style>
<script language="javascript" type="text/javascript">
function showDiv() {
document.getElementById('popWindow').style.display = 'block';
document.getElementById('maskLayer').style.display = 'block';
}
function closeDiv() {
document.getElementById('popWindow').style.display = 'none';
document.getElementById('maskLayer').style.display = 'none';
}
</script>
</head>
<body>
<div onclick="showDiv()" style="display:block; cursor:pointer">
彈出蒙板
</div>
<div id="popWindow" class="popWindow" style="display: none;">
</div>
<div id="maskLayer" class="maskLayer" style="display: none;">
<a href="#" onclick="closeDiv()" style="cursor:pointer;text-decoration: none;">
關(guān)閉蒙板
</a>
</div>
</body>
</html>
復(fù)制代碼 代碼如下:
<html>
<head>
<style type="text/css">
.popWindow {
background-color:#9D9D9D;
width: 100%;
height: 100%;
left: 0;
top: 0;
filter: alpha(opacity=50);
opacity: 0.5;
z-index: 1;
position: absolute;
}
.maskLayer {
background-color:#000;
width: 200px;
height: 30px;
line-height: 30px;
left: 50%;
top: 50%;
color:#fff;
z-index: 2;
position: absolute;
text-align:center;
}
</style>
<script language="javascript" type="text/javascript">
function showDiv() {
document.getElementById('popWindow').style.display = 'block';
document.getElementById('maskLayer').style.display = 'block';
}
function closeDiv() {
document.getElementById('popWindow').style.display = 'none';
document.getElementById('maskLayer').style.display = 'none';
}
</script>
</head>
<body>
<div onclick="showDiv()" style="display:block; cursor:pointer">
彈出蒙板
</div>
<div id="popWindow" class="popWindow" style="display: none;">
</div>
<div id="maskLayer" class="maskLayer" style="display: none;">
<a href="#" onclick="closeDiv()" style="cursor:pointer;text-decoration: none;">
關(guān)閉蒙板
</a>
</div>
</body>
</html>
相關(guān)文章
file控件選擇上傳文件確定后觸發(fā)的js事件是哪個(gè)
這篇文章主要介紹了file控件選擇上傳文件確定后觸發(fā)了什么js事件,需要的朋友可以參考下2014-03-03
JavaScript移除數(shù)組內(nèi)重復(fù)元素的方法
這篇文章主要介紹了JavaScript移除數(shù)組內(nèi)重復(fù)元素的方法,實(shí)例分析了javascript遍歷數(shù)組及刪除等操作的相關(guān)技巧,需要的朋友可以參考下2015-03-03
javascript函數(shù)報(bào)Uncaught?ReferenceError:?XXX?is?not?define
本文主要介紹了javascript函數(shù)報(bào)Uncaught?ReferenceError:?XXX?is?not?defined，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
js創(chuàng)建元素（節(jié)點(diǎn)）示例
本文為大家介紹下使用js是如何創(chuàng)建元素（節(jié)點(diǎn)）的，感興趣的朋友不要錯(cuò)過(guò)2014-01-01
完美兼容IE,chrome,ff的設(shè)為首頁(yè)、加入收藏及保存到桌面js代碼
這篇文章主要給大家分享了完美兼容IE,chrome,ff的設(shè)為首頁(yè)、收藏本站及保存到桌面js代碼，有需要的小伙伴參考下。2014-12-12
javascript 數(shù)組排序與對(duì)象排序的實(shí)例
這篇文章主要介紹了javascript 數(shù)組排序與對(duì)象排序的實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了JS生成一維碼(條形碼)功能,結(jié)合完整實(shí)例形式分析了JS插件生成條形碼的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
深入分析javascript中的錯(cuò)誤處理機(jī)制
這篇文章主要介紹了深入分析javascript中的錯(cuò)誤處理機(jī)制的相關(guān)資料,需要的朋友可以參考下2016-07-07
bootstrap彈出層有多種觸發(fā)方式，以下是我用到的bootstrap的兩種模態(tài)框方式，需要的的朋友參考下吧2017-05-05
bootstrap Table服務(wù)端處理分頁(yè)(后臺(tái)是.net)
這篇文章主要為大家詳細(xì)介紹了bootstrap Table服務(wù)端處理分頁(yè)，后臺(tái)是.net，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10