How to Implement the prompt box in the lower right corner of js _ javascript tips-js tutorial

This article mainly introduces how to implement the prompt box in the lower right corner of js, and analyzes the Jquery plug-in popup. for details about js usage, refer to the examples in this article to describe how to implement the prompt box in the lower right corner of js. Share it with you for your reference. The specific implementation method is as follows:

Implement the Jquery plug-in (popup. js) in the lower right corner of the prompt box)

The Code is as follows:

// Compatible with ie6 fixed code
// JQuery (function ($ j ){
// $ J ('# pop'). positionFixed ()
//})
(Function ($ j ){
$ J. positionFixed = function (el ){
$ J (el). each (function (){
New fixed (this)
})
Return el;
}
$ J. fn. positionFixed = function (){
Return $ j. positionFixed (this)
}
Var fixed = $ j. positionFixed. impl = function (el ){
Var o = this;
O. sts = {
Target: j(elasticsearch. CSS ('position', 'fixed '),
Container: $ j (window)
}
O. sts. currentCss = {
Top: o.sts.target.css ('top '),
Right: o.sts.target.css ('right '),
Bottom: o.sts.target.css ('bottom '),
Left: o.sts.target.css ('left ')
}
If (! O. ie6) return;
O. bindEvent ();
}
$ J. extend (fixed. prototype ,{
Ie6: $. browser. msie & $. browser. version <7.0,
BindEvent: function (){
Var o = this;
O.sts.target.css ('position', 'absolute ')
O. overRelative (). initBasePos ();
O.sts.target.css (o. sts. basePos)
O. sts. container. scroll (o. scrollEvent (). resize (o. resizeEvent ());
O. setPos ();
},
OverRelative: function (){
Var o = this;
Var relative = o.sts.tar get. parents (). filter (function (){
If(javasj(this%.css ('position') = 'relative ') return this;
})
If (relative. size ()> 0)relative.after(o.sts.tar get)
Return o;
},
InitBasePos: function (){
Var o = this;
O. sts. basePos = {
Top: o.sts.tar get. offset (). top-(o. sts. currentCss. top = 'auto '? O. sts. container. scrollTop (): 0 ),
Left: o.sts.tar get. offset (). left-(o. sts. currentCss. left = 'auto '? O. sts. container. scrollLeft (): 0)
}
Return o;
},
SetPos: function (){
Var o = this;
O.sts.target.css ({
Top: o. sts. container. scrollTop () + o. sts. basePos. top,
Left: o. sts. container. scrollLeft () + o. sts. basePos. left
})
},
ScrollEvent: function (){
Var o = this;
Return function (){
O. setPos ();
}
},
ResizeEvent: function (){
Var o = this;
Return function (){
SetTimeout (function (){
O.sts.target.css (o. sts. currentCss)
O. initBasePos ();
O. setPos ()
}, 1)
}
}
})
}) (JQuery)

JQuery (function ($ j ){
$ J ('# footer'). positionFixed ()
})

// Pop window function in the lower right corner
Function Pop (title, url, intro ){
This. title = title;
This. url = url;
This. intro = intro;
This. apearTime = 1000;
This. hidetime= 500;
This. delay = 10000;
// Add information
This. addInfo ();
// Display
This. showDiv ();
// Close
This. closeDiv ();
}
Pop. prototype = {
AddInfo: function (){
$ ("# PopTitle a" pai.attr('href', this.url).html (this. title );
$ ("# PopIntro" pai.html (this. intro );
$ ("# PopMore a"). attr ('href ', this. url );
},
ShowDiv: function (time ){
If (! ($. Browser. msie & ($. browser. version = "6.0 ")&&! $. Support. style )){
$ ('# Pop'). slideDown (this. apearTime). delay (this. delay). fadeOut (400 );;
} Else {// call jquery. fixed. js to solve ie6 failure to use fixed
$ ('# Pop'). show ();
JQuery (function ($ j ){
$ J ('# pop'). positionFixed ()
})
}
},
CloseDiv: function (){
$ ("# PopClose"). click (function (){
$ ('# Pop'). hide ();
}
);
}
}

Example in the lower-right corner

The Code is as follows:

Pop window in the lower right corner of jquery


Please refer to the browser with idea