Recently, I want to add a JS prompt box on the homepage of the main site. After searching for a long time, I finally found a very helpful JS prompt box;
The implementation is very simple, and the effect is great. Now, I hope to help you.
The content of the boxover. js file is:
/* --- Boxover ---
/* --- V 2.1 17th June 2006
By Oliver Bryant with help of Matthew Tagg
Http://boxover.swazz.org */
If (typeof document. attachevent! = 'Undefined '){
Window. attachevent ('onload', init );
Document. attachevent ('onmousemove ', movemouse );
Document. attachevent ('onclick', checkmove );}
Else {
Window. addeventlistener ('load', init, false );
Document. addeventlistener ('mousemove ', movemouse, false );
Document. addeventlistener ('click', checkmove, false );
}
VaR metadata = Document. createelement ("Div ");
VaR dvhdr = Document. createelement ("Div ");
VaR dvbdy = Document. createelement ("Div ");
VaR windowlock, boxmove, fixposx, fixposy, lockx, locky, Fixx, fixy, ox, oy, boxleft, boxright, boxtop, boxbottom, EVT, mousex, Mousey, boxopen, totalscrolltop, totalscrollleft;
Boxopen = false;
Ox = 10;
Oy = 10;
Lockx = 0;
Locky = 0;
Function Init (){
Metadata. appendchild (dvhdr );
Metadata. appendchild (dvbdy );
Gradient. style. Position = "absolute ";
Gradient. style. Visibility = 'hiden ';
Document. Body. appendchild (response );
}
function defhdrstyle () {
dvhdr. innerhtml = ' & nbsp;' + dvhdr. innerhtml;
dvhdr. style. fontweight = 'bold ';
dvhdr. style. width = '150px ';
dvhdr. style. fontfamily = 'arial';
dvhdr. style. border = '1px solid # a5cfe9';
dvhdr. style. padding = '3';
dvhdr. style. fontsize = '11';
dvhdr. style. color = '#4b7a98';
dvhdr. style. background = '# d5ebf9';
dvhdr. style. filter = 'Alpha (opacity = 85) '; // ie
dvhdr. style. opacity = '0. 85'; // FF
}
Function defbdystyle (){
Dvbdy. style. borderbottom = '1px solid # a5cfe9 ';
Dvbdy. style. borderleft = '1px solid # a5cfe9 ';
Dvbdy. style. borderright = '1px solid # a5cfe9 ';
Dvbdy. style. width = '150px ';
Dvbdy. style. fontfamily = 'arial ';
Dvbdy. style. fontsize = '11 ';
Dvbdy. style. Padding = '3 ';
Dvbdy. style. Color = '#1b4966 ';
Dvbdy. style. Background = '# ffff ';
Dvbdy. style. Filter = 'Alpha (opacity = 85) '; // IE
Dvbdy. style. Opacity = '0. 85'; // FF
}
Function checkelembo (txt ){
If (! TXT | typeof (txt )! = 'String') return false;
If (txt. indexof ('header')>-1) & (txt. indexof ('body')>-1) & (txt. indexof ('[')>-1) & (txt. indexof ('[')>-1 ))
Return true;
Else
Return false;
}
Function scanbo (curnode ){
If (checkelembo (curnode. Title )){
Curnode. bohdr = getparam ('header', curnode. Title );
Curnode. bobdy = getparam ('body', curnode. Title );
Curnode. bocssbdy = getparam ('cssbody', curnode. Title );
Curnode. bocsshdr = getparam ('cssheader', curnode. Title );
Curnode. iebugfix = (getparam ('hideselects', curnode. Title) = 'on ')? True: false;
Curnode. Fixx = parseint (getparam ('fixedrelx', curnode. Title ));
Curnode. fixy = parseint (getparam ('fixedrely ', curnode. Title ));
Curnode. absx = parseint (getparam ('fixedabsx ', curnode. Title ));
Curnode. absy = parseint (getparam ('fixedabsy ', curnode. Title ));
Curnode. offy = (getparam ('offsety', curnode. Title )! = '')? Parseint (getparam ('offsety', curnode. Title): 10;
Curnode. offx = (getparam ('offsetx', curnode. Title )! = '')? Parseint (getparam ('offsetx', curnode. Title): 10;
Curnode. Fade = (getparam ('fade ', curnode. Title) = 'on ')? True: false;
Curnode. fadespeed = (getparam ('fadespeed', curnode. Title )! = '')? Getparam ('fadespeed', curnode. Title): 0.04;
Curnode. Delay = (getparam ('delay', curnode. Title )! = '')? Parseint (getparam ('delay', curnode. Title): 0;
If (getparam ('requireclick', curnode. Title) = 'on '){
Curnode. requireclick = true;
Document. All? Curnode. attachevent ('onclick', showhidebox): curnode. addeventlistener ('click', showhidebox, false );
Document. All? Curnode. attachevent ('onmouseover', hidebox): curnode. addeventlistener ('mouseover', hidebox, false );
}
Else {// Note: If requireclick is on the Stop clicks are ignored
If (getparam ('doubleclickstop', curnode. Title )! = 'Off '){
Document. All? Curnode. attachevent ('ondblclick', pausebox): curnode. addeventlistener ('dblclick', pausebox, false );
}
If (getparam ('singleclickstop', curnode. Title) = 'on '){
Document. All? Curnode. attachevent ('onclick', pausebox): curnode. addeventlistener ('click', pausebox, false );
}
}
Curnode. windowlock = getparam ('windowlock', curnode. Title). tolowercase () = 'off '? False: true;
Curnode. Title = '';
Curnode. hasbox = 1;
}
Else
Curnode. hasbox = 2;
}
Function getparam (Param, list ){
VaR Reg = new Regexp ('([^ A-Za-Z]' + Param + '| ^' + Param + ') \ s * = \ s * \ [\ s * (\ [\ [) | (\]) | ([^ \] \ []) *) \ s * \] ');
VaR res = reg.exe C (list );
VaR returnvar;
If (RES)
Return res [2]. Replace ('[', '['). Replace (']', ']');
Else
Return '';
}
Function left (ELEM ){
VaR x = 0;
If (ELEM. calcleft)
Return ELEM. calcleft;
VaR oelem = ELEM;
While (ELEM ){
If (ELEM. currentstyle )&&(! Isnan (parseint (ELEM. currentstyle. borderleftwidth) & (X! = 0 ))
X + = parseint (ELEM. currentstyle. borderleftwidth );
X + = ELEM. offsetleft;
ELEM = ELEM. offsetparent;
}
Oelem. calcleft = X;
Return X;
}
function top (ELEM) {
var x = 0;
If (ELEM. calctop)
return ELEM. calctop;
var oelem = ELEM;
while (ELEM) {
If (ELEM. currentstyle )&&(! Isnan (parseint (ELEM. currentstyle. bordertopwidth) & (X! = 0)
X + = parseint (ELEM. currentstyle. bordertopwidth);
X + = ELEM. offsettop;
ELEM = ELEM. offsetparent;
}< br> oelem. calctop = x;
return X;
}
VaR ah, AB;
Function applystyles (){
If (AB)
Metadata. removechild (dvbdy );
If (Ah)
Metadata. removechild (dvhdr );
Dvhdr = Document. createelement ("Div ");
Dvbdy = Document. createelement ("Div ");
CBE. bocssbdy? Dvbdy. classname = CBE. bocssbdy: defbdystyle ();
CBE. bocsshdr? Dvhdr. classname = CBE. bocsshdr: defhdrstyle ();
Dvhdr. innerhtml = CBE. bohdr;
Dvbdy. innerhtml = CBE. bobdy;
Ah = false;
AB = false;
If (CBE. bohdr! = ''){
Metadata. appendchild (dvhdr );
Ah = true;
}
If (CBE. bobdy! = ''){
Metadata. appendchild (dvbdy );
AB = true;
}
}
VaR CSE, iterelem, LSE, CBE, LBE, totalscrollleft, totalscrolltop, width, height;
VaR ini = false;
// Customised function for inner window dimension
Function SHW (){
If (document. Body & (document. Body. clientwidth! = 0 )){
Width = Document. Body. clientwidth;
Height = Document. Body. clientheight;
}
If (document.doc umentelement & (document.doc umentelement. clientwidth! = 0) & (document. Body. clientwidth + 20> = document.doc umentelement. clientwidth )){
Widthdomaindocument.doc umentelement. clientwidth;
Height1_document.doc umentelement. clientheight;
}
Return [width, height];
}
VaR id = NULL;
Function movemouse (e ){
// Boxmove = true;
E? EVT = E: EVT = event;
Csew.evt.tar get? Evt.tar get: EVT. srcelement;
If (! Cse. hasbox ){
// Note we need to scan up Dom here, some elements like tr don't get triggered as srcelement
Ielem = CSE;
While (ielem. parentnode )&&(! Ielem. hasbox )){
Scanbo (ielem );
Ielem = ielem. parentnode;
}
}
If (CSE! = LSE )&&(! Ischild (CSE, dvhdr ))&&(! Ischild (CSE, dvbdy ))){
If (! Cse. boxitem ){
Iterelem = CSE;
While (iterelem. hasbox = 2) & (iterelem. parentnode ))
Iterelem = iterelem. parentnode;
Cse. boxitem = iterelem;
}
Iterelem = Cse. boxitem;
If (CSE. boxitem & (CSE. boxitem. hasbox = 1 )){
LBE = CBE;
CBE = iterelem;
If (CBE! = LBE ){
Applystyles ();
If (! CBE. requireclick)
If (CBE. Fade ){
If (ID! = NULL)
Cleartimeout (ID );
Id = setTimeout ("fadein (" + CBE. fadespeed + ")", CBE. Delay );
}
Else {
If (ID! = NULL)
Cleartimeout (ID );
Col = 1;
Id = setTimeout ("gradient. style. Visibility = 'visible '; id = NULL;", CBE. Delay );
}
If (CBE. iebugfix) {hideselects ();}
Fixposx =! Isnan (CBE. Fixx )? Left (CBE) + CBE. Fixx: CBE. absx;
Fixposy =! Isnan (CBE. fixy )? Top (CBE) + CBE. fixy: CBE. absy;
Lockx = 0;
Locky = 0;
Boxmove = true;
Ox = CBE. offx? CBE. offx: 10;
Oy = CBE. offy? CBE. offy: 10;
}
}
Else if (! Ischild (CSE, dvhdr )&&! Ischild (CSE, dvbdy) & (boxmove )){
// The conditional here fixes flickering between tables cells.
If ((! Ischild (CBE, CSE) | (CSE. tagname! = 'Table ')){
CBE = NULL;
If (ID! = NULL)
Cleartimeout (ID );
Fadeout ();
Showselects ();
}
}
LSE = CSE;
}
Else if (ischild (CSE, dvhdr) | ischild (CSE, dvbdy) & (boxmove ))){
Totalscrollleft = 0;
Totalscrolltop = 0;
Iterelem = CSE;
While (iterelem ){
If (! Isnan (parseint (iterelem. scrolltop )))
Totalscrolltop + = parseint (iterelem. scrolltop );
If (! Isnan (parseint (iterelem. scrollleft )))
Totalscrollleft + = parseint (iterelem. scrollleft );
Iterelem = iterelem. parentnode;
}
If (CBE! = NULL ){
Boxleft = left (CBE)-totalscrollleft;
Boxright = parseint (left (CBE) + CBE. offsetwidth)-totalscrollleft;
Boxtop = Top (CBE)-totalscrolltop;
Boxbottom = parseint (top (CBE) + CBE. offsetheight)-totalscrolltop;
Docheck ();
}
}
If (boxmove & CBE ){
// This added to alleviate bug in IE6 W. R. T doctype
Bodyscrolltopdeskdocument.documentelement&document.doc umentelement. scrolltop? Document.doc umentelement. scrolltop: Document. Body. scrolltop;
Bodyscrollletaskdocument.documentelement&document.doc umentelement. scrollleft? Document.doc umentelement. scrollleft: Document. Body. scrollleft;
Mousex = EVT. pagex? EVT. pagex-bodyscrolllets: EVT. clientX-document.body.clientLeft;
Mousey = EVT. Pagey? EVT. Pagey-bodyscrolltop: EVT. clientY-document.body.clientTop;
If (CBE) & (CBE. windowlock )){
Mousey <-oy? Locky =-mousey-oy: locky = 0;
Mousex <-ox? Lockx =-mousex-ox: lockx = 0;
Mousey> (SHW () [1]-example. offsetheight-Oy )? Locky =-Mousey + SHW () [1]-response. offsetheight-oy: locky = locky;
Mousex> (SHW () [0]-dvbdy. offsetwidth-Ox )? Lockx =-mousex-ox + SHW () [0]-dvbdy. offsetwidth: lockx = lockx;
}
Gradient. style. Left = (fixposx) | (fixposx = 0 ))? Fixposx: bodyscrolllet + mousex + ox + lockx + "PX ";
Examples. style. Top = (fixposy) | (fixposy = 0 ))? Fixposy: bodyscrolltop + Mousey + Oy + locky + "PX ";
}
}
Function docheck (){
If (mousex <boxleft) | (mousex> boxright) | (Mousey <boxtop) | (Mousey> boxbottom )){
If (! CBE. requireclick)
Fadeout ();
If (CBE. iebugfix) {showselects ();}
CBE = NULL;
}
}
Function pausebox (e ){
E? EVT = E: EVT = event;
Boxmove = false;
EVT. cancelbubble = true;
}
Function showhidebox (e ){
Gradient. style. Visibility = (gradient. style. Visibility! = 'Visible ')? 'Notificable': 'ddy ';
}
Function hidebox (e ){
Gradient. style. Visibility = 'hiden ';
}
VaR Col = 0;
VaR stopfade = false;
Function fadein (FS ){
Id = NULL;
Col = 0;
Gradient. style. Visibility = 'visable ';
Fadein2 (FS );
}
Function fadein2 (FS ){
Col = Col + FS;
Col = (COL> 1 )? 1: Col;
Criteria. style. Filter = 'Alpha (opacity = '+ parseint (100 * col) + ')';
Criteria. style. Opacity = Col;
If (COL <1)
SetTimeout ("fadein2 (" + FS + ")", 20 );
}
Function fadeout (){
Gradient. style. Visibility = 'hiden ';
}
Function ischild (S, d ){
While (s ){
If (S = D)
Return true;
S = S. parentnode;
}
Return false;
}
VaR CSRC;
Function checkmove (e ){
E? EVT = E: EVT = event;
Csrc=evt.tar get? Evt.tar get: EVT. srcelement;
If ((! Boxmove )&&(! Ischild (CSRC, callback ))){
Fadeout ();
If (CBE & CBE. iebugfix) {showselects ();}
Boxmove = true;
CBE = NULL;
}
}
Function showselects (){
VaR elements = Document. getelementsbytagname ("select ");
For (I = 0; I <elements. length; I ++ ){
Elements [I]. style. Visibility = 'visible ';
}
}
Function hideselects (){
VaR elements = Document. getelementsbytagname ("select ");
For (I = 0; I <elements. length; I ++ ){
Elements [I]. style. Visibility = 'den den ';
}
}
Usage:
Reference this file on the HTML page
<SCRIPT src = 'boxover file path'> </SCRIPT>
<P Title = "header = [tip] body = [drag and hold the mouse <br> DIY your home page]"> drag me and try </P>