熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

js控制的遮罩層實例介紹

2022-06-13   來源: JSP教程 

  閒來無事把項目裡很土的彈窗改成了遮罩層顯示感覺效果好點了上代碼 

父頁面   代碼如下: <div id=newDiv style="display: none;">  <%@include file=/WEBINF/jsp/infobackup/martyr/printCertDiajsp %>  <%<jsp:include page="/WEBINF/jsp/infobackup/martyr/printCertDiajsp" flush=”true”/> %>  </div>    printCertDiajsp 便是要顯示的最上層jsp 如果用jsp:include 頁面便會報錯至於為什麼還沒研究可能和加載順序有關 (在給標簽變量取名字時候如果變量和id名一樣時候js也會報錯要避免)  在父頁面添加觸發顯示遮罩層js  在這裡創建一個div和body一樣大小這樣就可以把整個頁面全部蓋住了  stylezIndex 來控制覆蓋的先後順序(層級)  stylefilter styleopacity 控制顯示透明°  代碼如下: //mask遮罩層  var newMask = documentcreateElement("div");  newMaskid = m;  newMaskstyleposition = "absolute";  newMaskstylezIndex = "";  _scrollWidth = Mathmax(documentbodyscrollWidth documentdocumentElementscrollWidth);  _scrollHeight = Mathmax(documentbodyscrollHeight documentdocumentElementscrollHeight);  newMaskstylewidth = _scrollWidth + "px";  newMaskstyleheight = _scrollHeight + "px";  newMaskstyletop = "px";  newMaskstyleleft = "px";  newMaskstylebackground = "#";  newMaskstylefilter = "alpha(opacity=)";  newMaskstyleopacity = "";  documentbodyappendChild(newMask);    js控制父頁面已經定義好的div顯示   代碼如下: newDiv=documentgetElementById("newDiv");  // var newDiv = documentcreateElement("div");  // newDivid = _id;  newDivstyleposition = "absolute";  newDivstylezIndex = "";  newDivWidth = ;  newDivHeight = ;  newDivstylewidth = newDivWidth + "px";  newDivstyleheight = newDivHeight + "px";  newDivstyletop = (documentbodyscrollTop + documentbodyclientHeight / newDivHeight / ) + "px";  newDivstyleleft = (documentbodyscrollLeft + documentbodyclientWidth / newDivWidth / ) + "px";  newDivstylebackground = "#FFEF";  newDivstyleborder = "px solid #";  newDivstylepadding = "px";  newDivstyledisplay=;    js控制父頁面div滾動居中  attachEvent addEventListener 對scroll 添加處理事件 newDivCenter   代碼如下: function newDivCenter() {  newDivstyletop = (documentbodyscrollTop + documentbodyclientHeight / newDivHeight / ) + "px";  newDivstyleleft = (documentbodyscrollLeft + documentbodyclientWidth / newDivWidth / ) + "px";  }  if (documentall) {  windowattachEvent("onscroll" newDivCenter);  }  else {  windowaddEventListener(scroll newDivCenter false);  }    動態給父頁面div添加關閉圖層和遮罩層(需要修改)   代碼如下: var newA = documentcreateElement("a");  newAhref = "#";  newAinnerHTML = "關閉";  newAonclick = function() {  if (documentall) {  windowdetachEvent("onscroll" newDivCenter);  }  else {  windowremoveEventListener(scroll newDivCenter false);  }  documentbodyremoveChild(docEle("newDiv"));  documentbodyremoveChild(docEle(m));  documentgetElementById("certImg")styledisplay=;  return false;  }  newDivappendChild(newA);     
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20029.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.