<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "lang=" ZH-CN "> <pead> <title> scrollable follow pop-up box effect code--cloud-dwelling community </title> <script> function getPosition () {var top = Document.documentElement.scrollTop; var left = Document.documentElement.scrollLeft; var height = document.documentElement.clientHeight; var width = document.documentElement.clientWidth; return {top:top,left:left,height:height,width:width}; function Showpop () {var width = 300;//popup width var height = 160;//popup height of var obj = document.getElementById ("Pop"); Obj.style.display = "block"; Obj.style.position = "absolute"; Obj.style.zindex = "999"; Obj.style.width = width + "px"; Obj.style.height = height + "px"; var Position = getPosition (); Leftadd = (position.width-width)/2; Topadd = (position.height-height)/2; Obj.style.top = (position.top + topadd) + "px"; Obj.stylE.left = (Position.left + leftadd) + "px"; Window.onscroll = function () {var Position = getPosition (); Obj.style.top = (position.top + topadd) + "px"; Obj.style.left = (Position.left + leftadd) + "px"; }; function Hidepop () {document.getElementById ("Pop"). Style.display = "None"; } </script> </pead> <body> Author: Ding Co-scrolling follow <div id= "Pop" >test<br>hide</div> <br& Gt;<br><br><br><br><br><br><br><br><br><br><br ><br><br><br><br><br><br><br><br><br><br><br ><br><br><br><br><br><br><br><br><br><br><br ><br><br><br><br> Show <br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br>< Br><br><br><br><br><br><br> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]