JS で制御されるマスク レイヤーの例の紹介_JavaScript スキル

仕方がないのでプロジェクト内のポップアップウィンドウをマスクレイヤー表示に変更したところ、効果が良くなった気がします。上位コード:
親ページ:

コードをコピー コードは次のとおりです:

<%@include file='/WEB-INF/jsp/infobackup/martyr/printCertDia.jsp'
<% --

🎜>

printCertDia.jsp は表示されるトップレベルの JSP です。 jsp:include ページを使用するとエラーが報告されます。なぜならまだ勉強していないからかもしれません。ロード順序に関係します。
(ラベル変数に名前を付けるとき、変数が ID と同じ名前である場合、js もエラーを報告します。これは避けるべきです)

マスクレイヤーの表示をトリガーする js を追加します。親ページ: ページ全体をカバーできるように、本文と同じサイズの div をここに作成します。
style.zIndex でオーバーレイの順序 (レベル) を制御します。
style.filter、style.opacity で表示の透明度を制御します。

コードをコピー コードは次のとおりです:

//マスク レイヤー
var newMask = document.createElement("div");
newMask.id = m;
newMask.style.zIndex = "1"; = Math .max(document.body.scrollWidth, document.documentElement.scrollWidth);
_scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
newMask.style.width = _scrollWidth "px ";
newMask.style.height = _scrollHeight "px";
newMask.style.left = "0px"; .background = "#666";
newMask.style.filter = "alpha(opacity=40)";
newMask.style.opacity = "0.40"; ;


js は、親ページで定義されている div の表示を制御します:

コードをコピー

コードは次のとおりです: newDiv=document.getElementById("newDiv1"); // var newDiv = document.createElement("div"); // newDiv .id = _id; newDiv.style.position = "9999";

newDivHeight = 600; style.width = newDivWidth "px";

newDiv.style.height = newDivHeight "px";
newDiv.style.top = (document.body.scrollTop document.body.clientHeight / 2 - newDivHeight / 2) "px";
newDiv.style.left = (document.body.scrollLeft document.body.clientWidth / 2 - newDivWidth / 2) "px";
newDiv.style.background = "#F7F7EF"; 🎜>newDiv.style.border = " 1px ソリッド #860001";
newDiv.style.padding = "5px";


js親ページ div のスクロールとセンタリングを制御します:
attachEvent、addEventListener はスクロールする処理イベント newDivCenter を追加します




コードをコピー


コードは次のとおりです。

function newDivCenter () {
newDiv.style.top = (document.body.scrollTop document.body.clientHeight / 2 - newDivHeight / 2) "px";

newDiv.style.left = (document.body.scrollLeft document .body.clientWidth / 2 - newDivWidth / 2) "px"; } if (document.all) { ウィンドウ。 attachEvent("onscroll", newDivCenter); } else { window.addEventListener('scroll', newDivCenter, false);

閉じレイヤーとマスクレイヤーを親ページ div に追加します (変更が必要です):




コードをコピー


コードは次のとおりです。

var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "閉じる"; function() {

if (document.all) { window.detachEvent(" onscroll", newDivCenter); } else { window.removeEventListener('scroll', newDivCenter, false); } document.body.removeChild(docEle("newDiv1") );

document.body.removeChild("certImg") .style.display='';

戻り値
}
newDiv