ホームページ > ウェブフロントエンド > jsチュートリアル > jsツールメソッドポップアップマスク_javascriptスキル

jsツールメソッドポップアップマスク_javascriptスキル

WBOY
リリース: 2016-05-16 17:34:29
オリジナル
1230 人が閲覧しました
コードをコピー コードは次のとおりです:

//工具方法弹出蒙版 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 (!マスク) {
initMask();
}
free = !!fre;
if (el == null) {
show(curr, false);
show(マスク, false);
//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 = MaskS how.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 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';
*/
マスク= document.createElement('div');
Mask.style.cssText = 'background-color:{$c};border:none;position:absolute;visibility:hidden;opacity:{$a};filter: alpha(opacity={$A})'.replaceWith({
c: マスクShow.bgColor || '#000',
a: マスクShow.bgAlpha || '0.5',
A: マスク表示。 bgAlpha ? parseInt(maskShow.bgAlpha * 100) : '50'
});


document.body.appendChild(mask);
マスクShow.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 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';
}
}
})();
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート