<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Body>
<Br>
<Input id = 'test'>
<Br>
<A href = '#' id = 'test2' onmouseover = "tips. show ('normal link or button prompt-gray-mouse exit disappears-300 pixels ', 'test2', null,' #000000 ', 300) "onmouseout =" tips. hidden ('test2') "> normal link or button prompt </a>
<Script>
// Message Type
Var tips = {
Temp :{},
/***
* A prompt is displayed.
*
* @ Param string msg prompt text content
* @ Param string id the id of the target object to be prompted. If the id is incorrect/null/false/0, the main window is displayed.
* @ Param int time: the number of milliseconds for timed disappearance. If it is null, 0, or false, it is not scheduled.
* @ Param string color the background color format of the prompt content is #000000.
* @ Param int width: Specifies the window width. The default value is 300.
*/
Show: function (msg, id, time, color, width)
{
Var target = this. _ get (id );
If (! Target) {id = 'window ';}
// If the pop-up exists, remove and re-pop up.
If (this. _ get (id + '_ tips') {this. remove (id );}
// Set the default value
Msg = msg | 'error ';
Color = color | '# ea0000 ';
Width = width || 300;
Time = time? ParseInt (time): false;
If (id = 'window '){
Var y = document. body. clientHeight/2 + document. body. scrollTop;
Var x = (document. body. clientWidth-width)/2;
Var textAlign = 'center', fontSize = '15', fontWeight = 'bold ';
} Else {
// Obtain the object coordinate information
For (var y = 0, x = 0; target! = Null; y + = target. offsetTop, x + = target. offsetLeft, target = target. offsetParent );
Var textAlign = 'left', fontSize = '12', fontWeight = 'normal ';
}
// A prompt is displayed.
Var tipsDiv = this. _ create ({display: 'block', position: 'absolute ', zIndex: '000000', width :( width-2) + 'px', left :( x + 1) + 'px ', padding: '5px', color: '# ffff', fontSize: fontSize + 'px', backgroundColor: color, textAlign: textAlign, fontWeight: fontWeight, filter: 'Alpha (Opacity = 50) ', opacity: '0. 7'}, {id: id + '_ text', innerHTML: msg, onclick: function () {tips. hidden (id );}});
Document. body. appendChild (tipsDiv );
TipsDiv. style. top = (y-tipsDiv.offsetHeight-12) + 'px ';
Document. body. appendChild (this. _ create ({display: 'block', position: 'absolute ', zIndex: '000000', width :( width + 10) + 'px', height :( tipsDiv. offsetHeight-2) + 'px ', left: x + 'px', top :( y-tipsDiv.offsetHeight-11) + 'px ', backgroundColor: color, filter: 'Alpha (Opacity = 50 )', opacity: '0. 7'}, {id: id + '_ bg '}));
If (id! = 'Window '){
Var arrow = this. _ create ({display: 'block', position: 'absolute ', overflow: 'ddd', zIndex: '000000', width: '20px', height: '10px ', left :( x + 20) + 'px ', top :( y-13) + 'px'}, {id: id + '_ arrow '});
Arrow. appendChild (this. _ create ({display: 'block', overflow: 'den den ', width: '0px', height: '10px ', borderTop: '10px solid' + color, borderRight: '10px solid # fff', borderLeft: '10px solid # fff', filter: 'Alpha (Opacity = 70) ', opacity: '0. 8 '}));
Document. body. appendChild (arrow );
}
// The flag is displayed.
This. temp [id] = id;
// If Timed Shutdown
If (time) {setTimeout (function () {tips. hidden (id) ;}, time )}
Return id;
},
/***
* Hide the prompt
*
* @ Param string id: the id of the prompt to be hidden. If you want to hide the id of the main window as window, you can hide all the prompt IDS as null.
*/
Hidden: function (id)
{
If (! Id) {for (var I in this. temp) {this. hidden (I) ;}return ;}
Var t = this. _ get (id + '_ text'), d = this. _ get (id + '_ bg'), a = this. _ get (id + '_ arrow ');
If (t) {t. parentNode. removeChild (t );}
If (d) {d. parentNode. removeChild (d );}
If (a) {a. parentNode. removeChild ();}
},
_ Create: function (set, attr)
{
Var obj = document. createElement ('div ');
For (var I in set) {obj. style [I] = set [I];}
For (var I in attr) {obj [I] = attr [I];}
Return obj;
},
_ Get: function (id)
{
Return document. getElementById (id );
}
};
Window. onload = function (){
Tips. show ('main window prompt-green-not scheduled-300 pixels ', null, null,' #009900 ', 300 );
Tips. show ('form error message-red-3000 milliseconds disappear-250 pixels ', 'test', 3000,' # ea0000 ', 250 );
}
Document. onclick = function (){
Tips. hidden ();
}
</Script>
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
