SoFunction
Updated on 2025-04-12

JavaScript floating positioning prompt effect implementation code page 2/2


var FixedTips = function(tip, options){
= $$(tip);// Prompt box

this._trigger = null;//trigger object
this._timer = null;//Timer
this._cssTip = ;//Simplify the code
this._onshow = false;//Record the current display status

(options);
//Processing Tip objects
var css = this._cssTip;
= 0;//Avoid positioning problems
= "absolute"; = "hidden";
= "block"; = 99;
= this._cssTip.top = "-9999px";//Avoid scroll bars in placeholder
//offset correction parameters
var iLeft = 0, iTop = 0, p = ;
while () {
p = ; iLeft += ; iTop += ;
};
this._offsetleft = iLeft;
this._offsettop = iTop;
// Keep the display state when moving into the Tip object
addEvent(, "mouseover", BindAsEventListener(this, function(e){
//If it is an external element entering, it means that it is currently a hidden delay phase, then clear the timer to cancel the hidden timer
() && clearTimeout(this._timer);
}));
//ie6 processing select
if (isIE6) {
var iframe = ("<iframe style='position:absolute;filter:alpha(opacity=0);display:none;'>");
(iframe, [0]);
this._cssiframe = ;
};
// Used to hide it when clicking
this._fCH = BindAsEventListener(this, function(e) {
if (() && ()) {
((this._trigger.HideDelayType));
};
});
// Used to hide the trigger method
this._fTH = BindAsEventListener(this, function(e) {
if (() && ()) {
((this._trigger.HideDelayType));
};
});
};
= {
//Set default properties
SetOptions: function(options) {
= {//Default value
ShowType: "both",//Show method
HideType: "both",//Hide method
ShowDelayType: "touch",//Show delay mode
HideDelayType: "touch",//Hide delay method
//"click": Only use click method, "touch": Only use trigger method, "both": both are used, "none": neither is used
ShowDelay: 300,//Show delay time
HideDelay: 300,//Hide delay time
Fixed: {},//Locate the object
onShow: function(){},//Execute when displayed
onHide: function(){}//Execute when hidden
};
Extend(, options || {});
},
//Check the trigger element
Check: function(elem) {
//Return whether external elements (i.e. trigger element and element objects other than Tip object itself and internal elements)
return !this._trigger ||
!(
=== elem || this._trigger.Elem === elem ||
Contains(, elem) || Contains(this._trigger.Elem, elem)
);
},
//Prepare to display
ReadyShow: function(delay) {
clearTimeout(this._timer);
var trigger = this._trigger;
//Hide trigger method
() && addEvent(this._trigger.Elem, "mouseout", this._fTH);
//Hide click method
() && addEvent(document, "click", this._fCH);
//show
if (delay) {
this._timer = setTimeout(Bind(this, ), );
} else { (); };
},
//show
Show: function() {
clearTimeout(this._timer);
This._trigger.onShow();//Put it in front to facilitate modifying properties
// Calculate left and top based on preset bits and custom positioning
var trigger = this._trigger,
pos = GetRelative(, , ),
iLeft = , iTop = ;
//Set the position and display it
this._cssTip.left = iLeft - this._offsetleft + "px";
this._cssTip.top = iTop - this._offsettop + "px";
this._cssTip.visibility = "visible";
//ie6 processing select
if (isIE6) {
var css = this._cssiframe;
= + "px";
= + "px";
= iLeft + "px"; = iTop + "px"; = "";
};
//Hide trigger method
() && addEvent(, "mouseout", this._fTH);
},
//Prepare to hide
ReadyHide: function(delay) {
clearTimeout(this._timer);
if (delay) {
this._timer = setTimeout(Bind(this, ), this._trigger.HideDelay);
} else { (); };
},
//hide
Hide: function() {
clearTimeout(this._timer);
//Set hidden
this._cssTip.visibility = "hidden";
this._cssTip.left = this._cssTip.top = "-9999px";
//ie6 processing select
if (isIE6) { this._cssiframe.display = "none"; };
//Processing trigger object
if (!!this._trigger) {
this._trigger.onHide();
removeEvent(this._trigger.Elem, "mouseout", this._fTH);
}
this._trigger = null;
//Remove event
removeEvent(, "mouseout", this._fTH);
removeEvent(document, "click", this._fCH);
},
//Add a trigger object
Add: function(elem, options) {
//Create a trigger object
var elem = $$(elem), trigger = Extend( Extend( { Elem: elem }, ), options || {} );
//Click to display
addEvent(elem, "click", BindAsEventListener(this, function(e){
if ( () ) {
if ( (trigger) ) {
(());
} else {
clearTimeout(this._timer);
};
};
}));
//Trigger mode display
addEvent(elem, "mouseover", BindAsEventListener(this, function(e){
if ( () ) {
if ((trigger)) {
(());
} else if (()) {
clearTimeout(this._timer);
};
};
}));
//Return to the trigger object
return trigger;
},
//Show check
CheckShow: function(trigger) {
if ( trigger !== this._trigger ) {
//If you are not the same trigger object, execute Hide first to prevent conflict
(); this._trigger = trigger; return true;
} else { return false; };
},
//Hide check
CheckHide: function() {
if ( this._cssTip.visibility === "hidden" ) {
//It is originally a hidden state and there is no need to execute Hide anymore
clearTimeout(this._timer);
removeEvent(this._trigger.Elem, "mouseout", this._fTH);
this._trigger = null;
removeEvent(document, "click", this._fCH);
return false;
} else { return true; };
},
//Whether to click
IsClick: function(type) {
type = ();
return type === "both" || type === "click";
},
//Is it triggered
IsTouch: function(type) {
type = ();
return type === "both" || type === "touch";
}
};