js控制的遮罩層

2022-09-03 02:54:10 字數 2508 閱讀 1696

閒來無事,把專案裡很土的彈窗,改成了遮罩層顯示,感覺效果好點了。上**:

父頁面:

<%@include file='/web-inf/jsp/infobackup/martyr/printcertdia.jsp' %>

<%--true」/> --%>

printcertdia.jsp 便是要顯示的最上層jsp. 如果用jsp:include 頁面便會報錯,至於為什麼還沒研究,可能和載入順序有關。

(在給標籤變數取名字時候,如果變數和id名一樣時候,js也會報錯,要避免)

在父頁面新增觸發顯示遮罩層js:

在這裡建立乙個div和body一樣大小,這樣就可以把整個頁面全部蓋住了。

style.zindex 來控制覆蓋的先後順序(層級)

style.filter ,style.opacity 控制顯示透明°。

//

mask遮罩層

var newmask = document.createelement("div");

newmask.id =m;

newmask.style.position = "absolute";

newmask.style.zindex = "1";

_scrollwidth =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.top = "0px";

newmask.style.left = "0px";

newmask.style.background = "#666";

newmask.style.filter = "alpha(opacity=40)";

newmask.style.opacity = "0.40";

js控制父頁面已經定義好的div顯示:

newdiv=document.getelementbyid("newdiv1");

//var newdiv = document.createelement("div");

= _id;

newdiv.style.position = "absolute";

newdiv.style.zindex = "9999";

newdivwidth = 700;

newdivheight = 600;

newdiv.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 solid #860001";

newdiv.style.padding = "5px";

newdiv.style.display='';

js控制父頁面div滾動居中:

attachevent ,addeventlistener 對scroll 新增處理事件 newdivcenter

function

newdivcenter()

if(document.all)

else

動態給父頁面div新增關閉圖層和遮罩層(需要修改):

var newa = document.createelement("a");

newa.href = "#";

newa.innerhtml = "關閉";

newa.onclick = function

()

else

document.body.removechild(docele("newdiv1"));

document.body.removechild(docele(m));

document.getelementbyid("certimg").style.display='';

return

false

; }

JS 層的遮罩效果

在網上看到乙個,用js寫的層的遮罩效果。和大家分享一下。css樣式,如下 js實現,如下 html 如下 input id button1 type button value 點選彈出層 onclick showdiv mydiv fade div id fade class black overl...

js 遮罩層 loading 效果

呼叫方法 關閉事件關閉,在loaddiv text 中,剔除出來 呼叫layershow text text為引數,可以寫入想要寫入的提示語 本方法在呼叫時會自動生成乙個新增到body的div,並且會在呼叫隱藏遮罩層 layerhide 時刪除div 封裝遮罩層div顯示效果 將其放在頁面的div中...

2015 3 12(遮罩層JS模組)

這兩天了解了一些前端開發常用的工具和庫和框架,有乙個疑問,如果大量使用這些現成的框架,會不會導致大材小用呢?就是每乙個頁面都要載入一遍可能要用的框架和庫,但實際上這個頁面的實現只會用到一小部分,這樣無形中就會拖慢速度或者是造成使用者的流量浪費。這種問題要怎麼解決呢?沒有開發經驗啊,這種優化問題有點想...