A small information prompt function implemented by javascript/

A small information prompt function implemented by javascript/

// What is the situation? Why is the CSDN layout too many times? I have not completed the adjustment several times. The last one is ......

Recently, due to business problems of the company, some public-oriented platforms need to be implemented, so the requirements for the UI will be higher, the traditional alert method prompts user operation errors, which obviously affects the customer experience. Therefore, a small function is provided to replace the original alert. Let's talk about it first.

The implementation principle is very simple. Use js to generate a div, and then start the movement from top: 0 to the place where the prompt is required. Wait for a second before moving to the center of the screen to hide it, if you click multiple times in a row, the first image will overlap, and the user experience in error operations will be fine. Put the source code below:

The showTip (content) method can be called easily. In this example, the multi-layer gradient is used, but only the single-layer color is displayed in IE8, which is slightly monotonous. (Note: The following several methods are the dependent motion framework in this example, which is put together for the call)

/*** Created by zhou on 2014-12-09. */function showTip (content) {var left = parseInt (document. body. clientWidth-300)/2); var top = parseInt (document. body. clientHeight-50)/2); var tipDiv = document. createElement ("div"); tipDiv. className = "tip"; tipDiv. innerHTML = content; if (! Document. head) {// IE8 does not support style. innerHTML writing method. Therefore, if the browser is IE8, you can use the js attribute assignment method to process it. // document. the head statement is not compatible with products earlier than IE8. Therefore, you can obtain whether the IE version is earlier than 8, tipDiv. style. width = "300px"; tipDiv. style. height = "50px"; tipDiv. style. border = "1px solid blue"; tipDiv. style. lineHeight = "50px"; tipDiv. style. textAlign = "center"; tipDiv. style. zIndex = "9999"; tipDiv. style. position = "absolute"; tipDiv. style. top = 0; tipDiv. style. left = left + "px"; tipDiv. style. backgroundColor = "# A793FF"; tipDiv. style. filter = "progid: DXImageTransform. microsoft. gradient (gradientType = 0, startColorStr = # 3d69ff, endColorStr = white);} ";}else {

// The benefit of writing an attribute to a CSS style is that when an attribute is compatible with different browsers, you do not need to write JavaScript logic code. Var styleStr = ". tip {width: 300px; height: 50px; border: 1px solid blue; line-height: 50px; text-align: center; "+" z-index: 9999; top: 0; left: "+ left +" px; filter: alpha (opacity = 0); opacity: 0.5; position: absolute; "+" background-color: # 3d69ff; background: -webkit-linear-gradient (top, # 3d69ff, # a793ff, # a793ff, # cac2ff, white); "+" background:-moz-linear-gradient (top, # 3d69ff, # a793ff, # a793ff, # cac2ff, white); "+" background:-ms-linear-gradient (top, # 3d69ff, # a793ff, # a793ff, # cac2ff, white); "+" background: linear-gradient (top, # 3d69ff, # a793ff, # a793ff, # cac2ff, white); "+" filter: progid: DXImageTransform. microsoft. gradient (gradientType = 0, startColorStr = # 3d69ff, endColorStr = white);} "; var style = document. createElement ("style"); style. innerHTML = styleStr; document. head. appendChild (style);} document. body. appendChild (tipDiv); doMove (tipDiv, {top: top, opacity: 100}, function () {setTimeout (function () {doMove (tipDiv, {top: 0, opacity: 0}, function (){

// When moving to top 0, delete the component. Otherwise, a large amount of garbage will be generated, occupying the tipDiv resource. parentNode. removeChild (tipDiv);}) ;}, 1000) ;});} function doMove (obj, oTarget, fn) {if (obj. timer) {clearInterval (obj. timer);} obj. timer = setInterval (function () {Move (obj, oTarget, fn)}, 10)} function Move (obj, oTarget, fn) {var iCur = 0; var arr = ""; var bStop = true; for (arr in oTarget) {if (arr = "opacity ") {// solve Google chrome incompatibility problem (some errors may occur when Google obtains opacity, and the transparency cannot reach the specified value) var temp = parseFloat (getStyle (obj, 'opacity ')) * 100; iCur = temp
 
  
0? Math. ceil (speed): Math. floor (speed); if (oTarget [arr]! = ICur) {bStop = false;} if (arr = "opacity") {obj. style. filter = "alpha (opacity:" + (iCur + speed) + ")"; obj. style. opacity = (iCur + speed)/100;} else {obj. style [arr] = iCur + speed + "px" ;}} if (bStop) {clearInterval (obj. timer); obj. timer = null; if (fn) {fn () ;}} function getStyle (obj, property) {if (obj. currentStyle) {// For IE return obj. currentStyle [property];} else if (window. getComputedStyle) {// For FireFox and chrome propprop = property. replace (/([A-Z])/g, "-$1"); propprop = property. toLowerCase (); return document. defaultView. getComputedStyle (obj, null) [property];} else {return null ;}}