js工具方法彈出蒙版
//工具方法彈出蒙版 add by dning 2012-11-4
var maskShow = (function () {
var mask = null;
var curr = null;
var free = false;
var func = {
onresize: null,
onscroll: null
};
return function (el, fre, Type) {
if (!mask) {
initMask();
}
free = !!fre;
if (el == null) {
show(curr, false);
show(mask, false);
showSelects(true); //for ie6
curr = null;
if (!free) for (var s in func) {
window[s] = func[s];
func[s] = null;
}
} else {
if (curr)
show(curr, false);
curr = $(el)[0];
checkVisib(curr);
rePos();
mask.style.zIndex = maskShow.zIndexBack || 15;
curr.style.zIndex = maskShow.zIndexFore || 20;
show(curr, true);
show(mask, true);
showSelects(false, el); //for ie6
if (!free) for (var s in func) {
func[s] = window[s];
window[s] = rePos;
}
}
if (Type == 0) {
mask.style.width = document.body.clientWidth + 'px';
mask.style.height = document.body.clientHeight + 'px';
if (el) el.style.position = "fixed";
} else {
mask.style.width = "0px";
mask.style.height = "0px";
if (el) el.style.position = "absolute";
}
};
function showSelects(b, box) {
if (!browser.IE6) return;
var sel = document.getElementsByTagName('select');
var vis = b ? 'visible' : 'hidden';
for (var i = 0; i < sel.length; i++) {
if ((b || !childOf(sel[i], box)) && sel[i].currentStyle.visibility != vis) sel[i].style.visibility = vis;
}
}
function childOf(a, b) {
while (a && a != b) a = a.parentNode;
return a == b;
}
function initMask() {
/*
mask=document.createElement('iframe');
mask.src='://0';
*/
mask = document.createElement('div');
mask.style.cssText = 'background-color:{$c};border:none;position:absolute;visibility:hidden;opacity:{$a};filter:alpha(opacity={$A})'.replaceWith({
c: maskShow.bgColor || '#000',
a: maskShow.bgAlpha || '0.5',
A: maskShow.bgAlpha ? parseInt(maskShow.bgAlpha * 100) : '50'
});
document.body.appendChild(mask);
maskShow.mask = mask;
}
function checkVisib(el) {
var sty = el.style;
sty.position = 'absolute';
sty.left = '-10000px';
sty.top = '-10000px';
sty.visibility = 'visible';
sty.display = 'block';
sty.zIndex = 10;
}
function rePos() {
if (!curr) return;
var ps = $pageSize('doc');
setRect(mask, ps);
var rc = centerPos(ps, curr.offsetWidth, curr.offsetHeight);
if (rc.left < ps.scrollLeft) rc.left = ps.scrollLeft;
if (rc.top < ps.scrollTop) rc.top = ps.scrollTop;
setRect(curr, rc);
}
function centerPos(ps, cw, ch) {
return {
left: ((ps.winWidth - cw) >> 1) + ps.scrollLeft + (maskShow.adjustX || 0),
top: ((ps.winHeight - ch) >> 1) + ps.scrollTop + (maskShow.adjustY || 0)
};
}
function setRect(el, rect) {
var sty = el.style;
sty.left = (rect.left || 0) + 'px';
sty.top = (rect.top || 0) + 'px';
if ('width' in rect)
sty.width = rect.width + 'px';
if ('height' in rect)
sty.height = rect.height + 'px';
}
function show(el, b) {
if (!el) return;
el.style.visibility = 'visible';
if (!b) {
el.style.left = -el.offsetWidth - 100 + 'px';
el.style.top = -el.offsetHeight - 100 + 'px';
}
}
})();
- js實(shí)現(xiàn)蒙版效果
- js 蒙版進(jìn)度條(結(jié)合圖片)
- JS實(shí)現(xiàn)判斷滾動(dòng)條滾到頁面底部并執(zhí)行事件的方法
- js,jquery滾動(dòng)/跳轉(zhuǎn)頁面到指定位置的實(shí)現(xiàn)思路
- 當(dāng)滾動(dòng)條滾動(dòng)到頁面底部自動(dòng)加載增加內(nèi)容的js代碼
- JS和JQUERY獲取頁面大小,滾動(dòng)條位置,元素位置(示例代碼)
- js判斷滾動(dòng)條是否已到頁面最底部或頂部實(shí)例
- js監(jiān)聽html頁面的上下滾動(dòng)事件方法
- js阻止移動(dòng)端頁面滾動(dòng)的兩種方法
- js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到頁面底部繼續(xù)加載
- javascript實(shí)現(xiàn)蒙版與禁止頁面滾動(dòng)
相關(guān)文章
JavaScript新功能介紹之findLast()和findLastIndex()
最近工作中遇到了一個(gè)關(guān)于查找數(shù)組里面的目標(biāo)元素的方法,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript新功能之findLast()?和findLastIndex()的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04Html中JS腳本執(zhí)行順序簡(jiǎn)單舉例說明
寫在最前面的最先執(zhí)行,Body的onload事件要在頁面加載完后才執(zhí)行。2010-06-06TensorFlow.js機(jī)器學(xué)習(xí)預(yù)測(cè)鳶尾花種類
TensorFlow.js是一個(gè)開源的基于硬件加速的JavaScript庫,用于訓(xùn)練和部署機(jī)器學(xué)習(xí)模型。本教程將會(huì)帶大家簡(jiǎn)單了解和使用TensorFlow.js框架實(shí)現(xiàn)預(yù)測(cè)鳶尾花種類2022-11-11跟我學(xué)習(xí)javascript的隱式強(qiáng)制轉(zhuǎn)換
跟我學(xué)習(xí)javascript的隱式強(qiáng)制轉(zhuǎn)換,感興趣的小伙伴們可以學(xué)習(xí)一下2015-11-11JavaScript獲取flash對(duì)象與網(wǎng)上的有所不同
關(guān)于js獲取flash對(duì)象,網(wǎng)上有非常多的例子,但不是我想要的,經(jīng)測(cè)試整理,因此本文誕生了2014-04-04javascript中時(shí)區(qū)知識(shí)的整理UTC GMT問題
這篇文章主要介紹了javascript中時(shí)區(qū)知識(shí)的整理UTC GMT問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Javascript? Constructor構(gòu)造器模式與Module模塊模式
這篇文章主要介紹了Javascript? Constructor構(gòu)造器模式與Module模塊模式,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08js獲取iframe中的window對(duì)象的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫S獲得iframe中的window對(duì)象的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05