jquery pop Pinball window with similar discuz in lower right corner message prompt box

Source: Internet
Author: User

Pop.js Code

The code is as follows Copy Code

Compliant 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 (EL). 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.target.parents (). Filter (function () {
if ($j (this). css (' position ') = = ' relative ') return this;
})
if (Relative.size () >0) Relative.after (o.sts.target)
return o;
},
Initbasepos:function () {
var o=this;
O.sts.basepos = {
Top:o.sts.target.offset (). Top-(o.sts.currentcss.top== ' auto '? O.sts.container.scrolltop (): 0),
Left:o.sts.target.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 Right bottom corner window function
Author: yanue
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 ();
Show
This.showdiv ();
Shut down
This.closediv ();
}
pop.prototype={
Addinfo:function () {
$ ("#popTitle a"). attr (' href ', this.url). html (this.title);
$ ("#popIntro"). 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, resolve IE6 cannot use fixed
$ (' #pop '). Show ();
JQuery (function ($j) {
$j (' #pop '). Positionfixed ()
})
}
},
Closediv:function () {
$ ("#popClose"). Click (function () {
$ (' #pop '). Hide ();
}
);
}
}


Calling methods is very simple

The code is as follows Copy Code

<script type= "Text/javascript" >
Remember to load jquery
Usage parameters: 1. title, 2. Link address, 3. Content Introduction
Window.onload=function () {
var pop=new pop ("Here is the title, haha",
"Http://www.111cn.net",
"Please input your content introduction, here is the content introduction. Please enter your content introduction, here is the content introduction. Please input your content introduction, here is the content introduction");
}
</script>

Instance

The code is as follows Copy Code

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>jquery right lower corner pop pinball window perfectly compatible ie6789 FF chrome</title>
<meta name= "Author" content= "Yanue"/>
<meta name= "Copyright" content= "powered by Yanue:yanue.info"/>
<meta name= "keywords" content= "jquery right corner pop Pinball window similar to discuz lower right corner message box perfect and beautiful complete compatibility simple and easy to use" >
<meta name= "description" content= code download + Demo simple and easy to use jquery pop Pinball window in the lower right corner is similar to the Discuz lower right corner message box is perfect and beautiful full compatibility through the Jquery.fixed.js plug-in to achieve compatibility " >
<body>

<!--jquery Pop Pinball window start-->
<script type= "Text/javascript" >
Remember to load jquery
Author: yanue
Usage parameters: 1. title, 2. Link address, 3. Content Introduction
Window.onload=function () {
var pop=new pop ("Here is the title, haha",
"Www.111cn.net",
"Please input your content introduction, here is the content introduction. Please enter your content introduction, here is the content introduction. Please input your content introduction, here is the content introduction");
}
</script>
<script type= "Text/javascript" src= "Jquery.min.js" ></script>
<script type= "Text/javascript" src= "Yanue.pop.js" ></script>
<div id= "Pop" style= "Display:none;" >
<style type= "Text/css" >
*{margin:0;padding:0;}
#pop {background: #fff; width:260px;border:1px solid #e0e0e0; font-size:12px;position:fixed;right:10px;bottom:10px;}
#popHead {line-height:32px;background: #f6f0f3; border-bottom:1px solid #e0e0e0;p osition:relative;font-size:12px; padding:0 0 0 10px;}
#popHead h2{font-size:14px;color: #666; line-height:32px;height:32px;}
#popHead #popClose {position:absolute;right:10px;top:1px;}
#popHead a#popclose:hover{color: #f00; cursor:pointer;}
#popContent {padding:5px 10px;}
#popTitle a{line-height:24px;font-size:14px;font-family: ' Microsoft Ya-hei '; color: #333; font-weight:bold;text-decoration:none ;}
#popTitle a:hover{color: #f60;}
#popIntro {text-indent:24px;line-height:160%;margin:5px 0;color: #666;}
#popMore {text-align:right;border-top:1px dotted #ccc; line-height:24px;margin:8px 0 0 0;}
#popMore a{color: #f60;}
#popMore a:hover{color: #f00;}
</style>
<div id= "Pophead" >
<a id= "Popclose" title= "off" > Off </a>
</div>
<div id= "Popcontent" >
<dl>
<dt id= "Poptitle" ><a href= "http://www.111cn.net/" target= "_blank" > here is the parameter </a></dt>
<dd id= "Popintro" > here is a brief introduction </dd>
</dl>
<p id= "Popmore" ><a href= "http://www.zhutiy.com/" target= "_blank" > View»</a></p>
</div>
</div>
<!--pop Pinball window end--> in lower right corner
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/>zhel
</body>

Download it yourself to try it out haha


Note: The jquery package is not available here for everyone to download.

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.