Power Project seven--js add floating box

1. Add a floating window style

<!--floating window style CSS begin--><style type= "Text/css" >#msg_win {border:1px solid #A67901; background: #EAEAEA; Width:240px;position:absolute;right:0;font-size:12px;font-family:arial;margin:0px;display:none;overflow:hidden;z-index:99;} #msg_win. icos{position:absolute;top:2px;*top:0px;right:2px;z-index:9;} . Icos a{float: Left;color: #833B02; margin:1px;text-align:center;font-weight:bold;width:14px;height:22px;line-height:22px; padding:1px;text-decoration:none;font-family:webdings;}    . Icos a:hover{color: #fff;} #msg_title {background: #BBDEF6; border-bottom:1px solid #A67901; border-top:1px solid #FFF; border-left:1px solid #FFF; color: #000; height:25px;line-height : 25px;text-indent:5px;} #msg_content {Margin:5px;margin-right:0; width:230px;height:126px;overflow:hidden;}</style><!--Floating window style CSS end--

2. Add a floating window JS

<!--floating window JS, must be placed to the last Begin--><script language= "JavaScript" >var Message={set:function () {//minimizing and resuming state switchingvar set= This. Minbtn.status = = 1? [0,1, ' block ', This.Char[0], ' Minimize ']:[1,0, ' none ', This.Char[1], ' unfold '];  This. minbtn.status=set[0];  This. win.style.borderbottomwidth=set[1];  This. Content.style.display =set[2];  This. minbtn.innerhtml =set[3]         This. Minbtn.title = Set[4];  This. Win.style.top = This. GetY (). Top; }, Close:function () {//Close         This. Win.style.display = ' None '; Window.onscroll=NULL; }, Setopacity:function (x) {//Set Transparencyvar v = x >= 100? ': ' Alpha (opacity= ' + x + ') ';  This. win.style.visibility = x<=0? ' Hidden ': ' Visible ';//IE has a bug that absolute or relative positioning content does not change with the parent's transparency         This. Win.style.filter =v;  This. win.style.opacity = x/100; }, Show:function () {//FadeClearinterval ( This. Timer2); var me= This, FX = This. FX (0, 0.1), T = 0;  This. Timer2 =setinterval (function () {T=FX (); Me.setopacity (t[0]); if(t[1] = = 0) {clearinterval (Me.timer2)}},10); }, Fx:function (A, B, c) {//Buffer Calculationvar cmath = math[(A-B) > 0? "Floor": "ceil"],c = C | | 0.1; returnfunction () {return[A + = Cmath ((b-a) * c), A-b]}}, Gety:function () {//Calculate moving coordinatesvar d = document,b = Document.body, E =document.documentelement; var s=Math.max (B.scrolltop, e.scrolltop); var h=/backcompat/i.test (Document.compatmode)?B.clientheight:e.clientheight; var H2= This. Win.offsetheight; return{foot:s + H + H2 + ' px ', top:s + h-h2-2+ ' px '}}, Moveto:function (y) {//Moving AnimationsClearinterval ( This. Timer); var me= This, a = parseint ( This. win.style.top) | | 0; var FX= This. FX (A, parseint (y)); var t= 0 ;  This. Timer =setinterval (function () {T=FX (); Me.win.style.top= t[0]+ ' px '; if(t[1] = = 0) {clearinterval (Me.timer);            Me.bind (); }        },10); }, Bind:function () {//bind window scroll bar with size Change eventvar me= This, St,rt; Window.onscroll=function () {cleartimeout (ST);            Cleartimeout (ME.TIMER2); Me.setopacity (0); St=setTimeout (function () {Me.win.style.top=me.gety (). Top;            Me.Show (); },600);        }; Window.onresize=function () {cleartimeout (RT); RT= SetTimeout (function () {me.win.style.top = Me.gety (). top},100); }}, Init:function () {//Create HTMLfunction $ (ID) {returndocument.getElementById (ID)};  This. win=$ (' Msg_win '); var set={MINBTN: ' Msg_min ', closebtn: ' Msg_close ', title: ' Msg_title ', content: ' Msg_content '};  for(Var Id in set) { This[Id] =$ (set[id])}; var me= This;  This. Minbtn.onclick = function () {me.set (); This. blur ()};  This. Closebtn.onclick =function () {me.close ()};  This.Char=navigator.useragent.tolowercase (). IndexOf (' Firefox ') +1? [' _ ', ':: ', ' x ']:[' 0 ', ' 2 ', ' R '];//FF does not support Webdings fonts         This. minbtn.innerhtml= This.Char[0];  This. closebtn.innerhtml= This.Char[2]; SetTimeout (function () {//Initialize first positionMe.win.style.display = ' block '; Me.win.style.top=me.gety (). Foot;        Me.moveto (Me.gety (). top); },0); return  This; }}; Message.init ();</script><!--Floating Window js end-->

3.html code, placed after body

    <!--floating window HTML code Begin--    class= "Icos" >            <a id= "msg_min" title= "Minimize" href= "Javascript:void 0" >_</a><a Id= "Msg_close" title= "Off" href= "Javascript:void 0" >x            </a>        </div>        <div id= " Msg_title ">             Equipment operating conditions --        </div>        <div id=" msg_content "style=" Overflow:auto ; Height:150px;width:100%;white-space:nowrap ">            <s:property value=" Devrun "escape=" false "/>                    </div>    </div>    <!--floating window HTML code end---

Power Project seven--js add floating box