WebページMask効果の実現
1290 ワード
Webページの内容をコミットすると、ユーザーが混乱しないように制御したい場合は、loadingのページを追加し、このページは元のページの上に上書きされます.この効果を実現するのは、JavaScriptやCSSで可能です.
1)formのonsubmitの処理では、
にある
htmlに追加
2)
3)このDivオブジェクトのCSSスタイルの設定に重点を置く
次のようになります.
これでいいです.
4)ユーザーがブラウザウィンドウのサイズを拡大・縮小することに注意してください.
処理が必要
divのwidthとheightを再計算する
5)表示終了時に呼び出す
これでMask効果が実現します.
1)formのonsubmitの処理では、
にある
document.createElement('div') <div>htmlに追加
document.body.appendChild(div)2)
div.innerHtml = " GUI ";3)このDivオブジェクトのCSSスタイルの設定に重点を置く
次のようになります.
div.style.top = '0px';
div.style.left = '0px';
div.style.zIndex = 10000;
div.style.width = this.GetDocumentWidth() + 'px';
div.style.height = this.GetDocumentHeight() + 'px';
div.style.display = 'block';
div.style.position = 'absolute';
div.style.filter = "alpha(opacity:50)";
div.style.KHTMLOpacity = 0.5;
div.style.MozOpacity = 0.5;
div.style.opacity = 0.5;
div.style.background = '#ccc';
これでいいです.
4)ユーザーがブラウザウィンドウのサイズを拡大・縮小することに注意してください.
処理が必要
window.onresize = function()divのwidthとheightを再計算する
5)表示終了時に呼び出す
div.style.display = 'none';これでMask効果が実現します.