As required by the system, a class of the pop-up div is recently written in Javascript. At the beginning, I didn't want to write it myself. I thought there were a lot of online resources and I could find one, but the code I found was always unable to meet my needs. There are several main problems: one is not moving, the other is that the pop-up Div layer can only cover the sub-pages in IFRAME, not the whole page, third, if the DIV layer is popped up again, it can only be fixed in the previous Div.
The solution is to load the JS file on the top-level page and dynamically create the DIV layer. The top-level page cannot use frameset.
Top-level Page code<Body> <Div id = "Header"> <IFRAME src = "head. aspx "mce_src =" head. aspx "width =" 100% "Height =" 60px "name =" framehead "id =" framehead "scrolling =" no "marginheight =" 0 "marginwidth =" 0 "frameborder =" 0 "> </iframe> </div> <Div id =" Index "> <Table id =" otable "align =" center "width =" 100% "cellpadding =" 0 "cellspacing =" 0 "border =" 0 "> <tr> <TD width =" 160px "style =" vertical-align: top "mce_style =" vertical-align: Top "> <IFRAME src =" tasklist. aspx "mce_src =" tasklist. aspx "width =" 100% "name =" framelist "id =" framelist "scrolling =" no "marginheight =" 0 "marginwidth =" 0 "frameborder =" 0 "> </ IFRAME> </TD> <TD style = "vertical-align: top "mce_style =" vertical-align: Top "> <IFRAME src =" doorcard/webtest. aspx "mce_src =" doorcard/webtest. aspx "width =" 100% "name =" Main "id =" Main "scrolling =" no "marginheight =" 0 "marginwidth =" 0 "frameborder =" 0 "> </ IFRAME> </TD> </tr> </table> </div> </body>
The movediv. js code is as follows:
Document. Write ("<style type = \" text/CSS \ "> <! -- A: Link, A: visited {text-Decoration: None ;}--> </style> "); var isie = (document. All )? True: false; var backid = "_ backdiv"; var divid = "_ popdivid _"; var keepid = "_ keepdiv _"; function creatediv (title, width, height, URL) {showdiv (title, width, height, URL, 1);} function showdiv (title, width, height, URL, floor) {If (isnan (floor) | floor <1) {return;} // prevents invalid closediv (floor) calls; // prevents repeated calls of VaR bwidth = parseint(document.doc umentelement. scrollwidth); var bheight = parseint (document. d Ocumentelement. scrollheight); If (floor = 1) {createbackdiv ();} var o = document. createelement ("Div"); O. id = divid + String (floor); o.style.css text = 'position: absolute; width: '+ width + 'px; Height:' + height + 'px; Border: 1px solid #000000; float: Left; Z-index: 1000; '; // filter: alpha (opacity = 100); O. innerhtml = getdivstr (title, height, floor); O. style. top = (bheight-height)/2 + "PX" O. sty Le. left = (bwidth-width)/2 + "PX"; O. style. index = string (floor); O. onmousedown = keepmousedown; O. onmousemove = keepmousemove; O. onmouseup = keepmouseup; document. body. appendchild (o); // the setTimeout ("document. frames ['_ mainchild "+ String (floor) +"']. location. href = '"+ URL +"'; ", 0); createkeepdiv (floor);} function createbackdiv () {closeobj (backid); If (isie) {setselectstate ('den den ');} VaR bwidth = parseint(document.doc umentelement. scrollwidth); var bheight = parseint(document.doc umentelement. scrollheight); var back = document. createelement ("Div"); Back. id = backid; var stylestr = "Top: 0px; left: 0px; position: absolute; Background: #666666; overflow: hidden; width:" + bwidth + "PX; height: "+ bheight +" PX; Z-index: 999; "; stylestr + = (isie )? "Filter: alpha (opacity = 40);": "opacity: 0.40;"; // stylestr + = "filter: alpha (opacity = 40); opacity: 0.40 ;"; back.style.css text = stylestr; document. body. appendchild (back);} function closediv (floor) {closeobj (divid + String (floor); closeobj (keepid + String (floor); If (floor = 1) {closeobj (backid);} setselectstate ("");} function createkeepdiv (floor) {var popdiv = document. getelementbyid (divid + strin G (floor); var o = document. createelement ("Div"); O. id = keepid + String (floor); o.style.css text = "position: absolute; Background: #666666; overflow: hidden; filter: alpha (opacity = 0); Z-index: 1001; display: none "; O. innerhtml = ""; O. style. top = popdiv. style. top; O. style. left = popdiv. style. left; O. style. width = popdiv. style. width; O. style. height = popdiv. style. height; O. style. index = string (floor); // o. O Nmousedown = keepmousedown; O. onmousemove = keepmousemove; O. onmouseup = keepmouseup; document. body. appendchild (o);} function closeobj (ID) {var odiv = document. getelementbyid (ID); If (odiv & odiv! = NULL) {odiv. parentnode. removechild (odiv) ;}}var flag = 0; var minus_x = 0; var minus_y = 0; function keepmousedown (e) {var EVT = E | window. event; If (window. event. srcelement. tagname = "A") {return;} If (document. setcapture) This. setcapture (); If (window. captureevents) window. captureevents (event. mousemove | event. mouseup); flag = 1; this. style. cursor = 'move '; minus_x = EVT. clientx-this. Offsetleft; minus_y = EVT. clienty-this. offsettop; // transparency when moving. If (isie) {This. setcapture (); this. style. setattribute ("filters. alpha. opacity ", 40); // This. filters. alpha. opacity = 40;} else {window. captureevents (event. mousemove); this. style. opacity = 0.5 ;}} function keepmouseup (e) {var OBJ = document. getelementbyid (divid + String (this. style. index); If (document. releasecapture) This. releasecapt Ure (); If (window. releaseevents) window. releaseevents (event. mousemove | event. mouseup); flag = 0; // If (obj. filters. alpha & obj. filters. alpha! = NULL) {obj. filters. alpha. opacity = 100;} else {obj. style. setattribute ("filters. alpha. opacity ", 40);} document. getelementbyid (keepid + String (this. style. index )). style. display = "NONE";} function keepmousemove (e) {var keep = document. getelementbyid (keepid + String (this. style. index); var OBJ = document. getelementbyid (divid + String (this. style. index); var EVT = E | window. event; If (flag = 1) {keep. style. display = ""; obj. style. left = parseint (EVT. clientx-minus_x) + 'px '; obj. style. top = parseint (EVT. clienty-minus_y) + 'px '; If (parseint (EVT. clientx-minus_x) <0) {obj. style. left = "0px";} If (parseint (EVT. clienty-minus_y) <0) {obj. style. top = "0px";} If (parseint (EVT. clientx-minus_x)> (document. body. clientwidth-parseint (obj. style. width) {obj. style. left = (docum Ent. Body. clientwidth-parseint (obj. style. width) + 15;} var back = Document. getelementbyid (backid); If (back! = NULL) {If (parseint (EVT. clienty-minus_y)> (parseint (back. style. height)-parseint (obj. style. height) {obj. style. top = parseint (back. style. height)-parseint (obj. style. height)-15 ;}} movefloor (keep, OBJ);} else {return NULL ;}} window. onresize = resizebackdiv; function resizebackdiv () {window. onresize = NULL; var odiv = document. getelementbyid (backid); If (odiv & odiv! = NULL) {createbackdiv ();} setTimeout (function () {window. onresize = resizebackdiv;}, 0);} // move the covering layer toobj-covering layer frmobj -- function movefloor (toobj, frmobj) {toobj. style. display = ""; toobj. style. left = frmobj. style. left; toobj. style. top = frmobj. style. top; toobj. style. width = frmobj. style. width; toobj. style. height = frmobj. style. height;} function setselectstate (state) {var oarray = document. gete Lementsbytagname ('select'); For (VAR I = 0; I <oarray. length; I ++) {oarray [I]. style. visibility = State ;}} function gettimeid () {var todate = new date (); Return todate. gethours () + "" + todate. getminutes () + "" + todate. getseconds () + "" + todate. getmilliseconds (); // format ("YYYY-MM-DD hh: mm: SS");} function getdivstr (title, framheight, floor) {var Height = Number (framheight)-24; vaR popdiv = ""; Popdiv + = "<style type = \" text/CSS \ "> <! -- A: Link, A: visited {text-Decoration: None ;}--> </style> "; popdiv + = "<Table align = 'center' width = '000000' cellpadding = '0' cellspacing = '0' border = '0'> "; popdiv + = "<tr style = 'background: #99 CCCC; Height: 24px; '> <TD> "+ title +" </TD> <TD align = 'right'> <a href = # onclick = 'closediv ("+ FLOOR + "); '> close </a> </TD> </tr> "; popdiv + =" <tr> <TD colspan = '2'> "; popdiv + = "<IFRAME id = '_ mainchild" + String (floor) + "'name =' _ mainchild" + String (floor) + "'height = '" + String (height) + "PX 'frameborder = '0' marginheight = '0' marginwidth = '0' width = '000000' src =''> </iframe> "; popdiv + = "</TD> </tr>"; popdiv + = "</table>"; // alert (popdiv); Return popdiv ;}
During the call, the JS file is loaded on the top-level page. Therefore, the transfer of values between pages is different from that of general pages.
The following code calls the pop-up layer on the webtest. ASPX page:
A parent. creatediv ("test", 750,300, "A. aspx") is displayed ");
On the. ASPX page, parent. showdiv ('test', 400,200, 'B. aspx', 1)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
