Similar to Gmail Ajax feedback Display _ page background

Source: Internet
Author: User
Tags numeric numeric value

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "http://www.w3c.org/TR/1999/REC-html401-19991224/ Loose.dtd ">
<meta http-equiv=content-type content= "text/html; charset=gb2312 ">
<meta content= "MSHTML 6.00.2900.2180" name=generator>
<meta content= "" name=author>
<meta content= "" name=keywords>
<meta content= "" name=description>
<style type=text/css> #show_feedBack_message {
Border-right: #f00 1px solid; padding-right:3px; Border-top: #f00 1px solid; padding-left:3px; font-size:12px; BACKGROUND: #fc0; padding-bottom:3px; Border-left: #f00 1px solid; line-height:18px; padding-top:3px; Border-bottom: #f00 1px solid
}
{
font-size:12px
}
OL LI {
margin:15px 0px
}
OL LI A {
font-size:14px; COLOR: #00f
}
</STYLE>
</HEAD>
<BODY>
<script type=text/javascript>
<!--
/*
Message: Messages to display
X,y: Displays the coordinates of the message box, default to upper left corner
Delay: How long the delay disappears,-1 is never gone, the unit is milliseconds
*/
function Feedbackmessage (message,x,y,delay) {
if (!message) return;
Allow only percentages or numeric parameters
X=/\d{1,2}%|100%|left|right/.test (x)? x: (parseint (x) | | 0) + "px";
Y=/\d{1,2}%|100%|top|bottom/.test (y)? Y: (parseint (y) | | 0) + "px";
Delay=parseint (delay) | | -1;
var Fddiv=document.getelementbyid (' Show_feedback_message ');
if (!fddiv) {
var showmessage=document.createelement ("<div id= ' show_feedback_message ' style= ') Z-index:10000;filter:alpha ( opacity=100);p osition:absolute;white-space:nowrap ' ></div> ');
Document.body.appendChild (ShowMessage);
Fddiv=document.getelementbyid (' show_feedback_message ');
}

if (Feedbackmessage.timer) {clearinterval (Feedbackmessage.timer)}
Fddiv.innerhtml=message;
Fddiv.style.display= "";
var docwidth=document.documentelement.scrollwidth>document.documentelement.clientwidth? Document.documentElement.scrollWidth:document.documentElement.clientWidth;
var docheight=document.documentelement.scrollheight>document.documentelement.clientheight? Document.documentElement.scrollHeight:document.documentElement.clientHeight;
if (/left|right/.test (x)) {
x= (x== "left")? " 0px ":(docwidth-fddiv.offsetwidth) +" px ";
}
if (/top|bottom/.test (y)) {
Y= (y== "top")? " 0px ":(docheight-fddiv.offsetheight) +" px ";
}
Fddiv.style.left=x;
Fddiv.style.top=y;
fddiv.filters.alpha.opacity=100;

Fade effect
var step=parseint (delay/100);
var alpha=fddiv.filters.alpha.opacity;
if (delay!=-1) {
Feedbackmessage.timer=setinterval (function () {
if (fddiv.filters.alpha.opacity>0) {
fddiv.filters.alpha.opacity--
}else{
Clearinterval (Feedbackmessage.timer);
Fddiv.style.display= "None"
}
},STEP);
}
}
-->
</SCRIPT>

<div style= "Text-align:center" >
<div style= "margin:15px auto; width:96%; Text-align:left ">
<OL>
<LI> (default settings) display location: Upper left corner vanishing time: not disappearing <br><br><a
onclick= "feedbackmessage (' message hint Test 1 ... '); return false"
href= "#" >feedbackmessage (' message hint test ... ') </A>

<LI> Show Location: left:200px,top:200px Vanishing Time: 5 Seconds later <br><br><a
onclick= "feedbackmessage (' message hint Test 1 ... ', '", ', ', 5000); return false "
href= "#" >feedbackmessage (' message hint Test 1 ... ', ', ', ' 5000 ') </A>

<LI> Show Location: Page top Right Vanishing Time: 3 seconds later <br><br><a
onclick= "feedbackmessage (' message hint Test 2 ... ', ' right ', ' top ', 3000); return false"
href= "#" >feedbackmessage (' message hint Test 2 ... ', ' right ', ' top ', 3000) </A>

<LI> Show Location: left:50%,top:50% Vanishing Time: 2 seconds later <br><br><a
onclick= "feedbackmessage (' message hint Test 3 ... ', ' 50% ', ' 50% '); return false"
href= "#" >feedbackmessage (' message hint Test 3 ... ', ' 50% ', ' 50% ', Watts) </A>
<LI> Show Location: left:500px,top:200px vanishing Time: not disappearing <br><br><a
onclick= "feedbackmessage (' message hint Test 4 ... ', '" ', ', ', -1); return false "
href= "#" >feedbackmessage (' message hint Test 4 ... ', ', ', ' -1 ') </A> </LI></OL></DIV>
<div
Style= "FONT-SIZE:14PX; MARGIN:15PX Auto; width:96%; line-height:20px; Text-align:left "> Function Syntax: feedbackmessage (Message,x,y,delay)
<BR><BR><STRONG> Parameters Introduction:</strong> <BR><U>Message:</U> Required Parameters. This parameter is the content of the message to be displayed and can be HTML content
<BR><U>X:</U> horizontal position, can be numeric value such as 50,250, can also be a percentage of 50%, or two parameters: Left (information box to the left-hand side of the left side of the page), right (information box on the right-hand side of the page) )。 The default is left.
<BR><U>Y:</U> vertical position, can be a numeric value, or a percentage, or the following two parameters: Top (The information box is located just above the top of the page), bottom (the bottom of the information box is near the bottom of the page). The default is top.
<BR><U>Delay:</U> show the time, that is, how long after the disappearance of the unit in milliseconds, such as 5000 or 5 seconds after the disappearance, set to-1 will never disappear. Default is-1
</DIV></DIV>
</BODY>
</HTML>

Online Demo http://demo.jb51.net/js/gmail_info/demo.htm
Related Article

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.