Awesome JS prompt box

Source: Internet
Author: User
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>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.