jquery右下角pop弹窗 完美兼容ie6789 ff chrome

HTML

1 <script type="text/javascript" >
2       //使用参数:1.标题,2.链接地址,3.内容简介
3       window.onload=function(){
4             var pop=new Pop("这里是标题,哈哈",
5             "http://www.yanue.info/js/pop/pop.html",
6             "请输入你的内容简介,这里是内容简介.请输入你的内容简介,这里是内容简介.请输入你的内容简介,这里是内容简介");
7         }
8 </script>

 

 1 <div id="pop" style="display:none;">
 2     <style type="text/css">
 3     *{margin:0;padding:0;}
 4     #pop{background:#fff;width:260px;border:1px solid #e0e0e0;font-size:12px;position: fixed;right:10px;bottom:10px;}
 5     #popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;position:relative;font-size:12px;padding:0 0 0 10px;}
 6     #popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;}
 7     #popHead #popClose{position:absolute;right:10px;top:1px;}
 8     #popHead a#popClose:hover{color:#f00;cursor:pointer;}
 9     #popContent{padding:5px 10px;}
10     #popTitle a{line-height:24px;font-size:14px;font-family:'微软雅黑';color:#333;font-weight:bold;text-decoration:none;}
11     #popTitle a:hover{color:#f60;}
12     #popIntro{text-indent:24px;line-height:160%;margin:5px 0;color:#666;}
13     #popMore{text-align:right;border-top:1px dotted #ccc;line-height:24px;margin:8px 0 0 0;}
14     #popMore a{color:#f60;}
15     #popMore a:hover{color:#f00;}
16     </style>
17     <div id="popHead">
18     <a id="popClose" title="关闭">关闭</a>
19     <h2>温馨提示</h2>
20     </div>
21     <div id="popContent">
22     <dl>
23         <dt id="popTitle"><a href="http://yanue.info/" target="_blank">这里是参数</a></dt>
24         <dd id="popIntro">这里是内容简介</dd>
25     </dl>
26     <p id="popMore"><a href="http://yanue.info/" target="_blank">查看 »</a></p>
27     </div>
28 </div>

 JS

  1 //兼容ie6的fixed代码 
  2 //jQuery(function($j){
  3 //    $j('#pop').positionFixed()
  4 //})
  5 (function($j){
  6     $j.positionFixed = function(el){
  7         $j(el).each(function(){
  8             new fixed(this)
  9         })
 10         return el;                  
 11     }
 12     $j.fn.positionFixed = function(){
 13         return $j.positionFixed(this)
 14     }
 15     var fixed = $j.positionFixed.impl = function(el){
 16         var o=this;
 17         o.sts={
 18             target : $j(el).css('position','fixed'),
 19             container : $j(window)
 20         }
 21         o.sts.currentCss = {
 22             top : o.sts.target.css('top'),              
 23             right : o.sts.target.css('right'),              
 24             bottom : o.sts.target.css('bottom'),                
 25             left : o.sts.target.css('left')             
 26         }
 27         if(!o.ie6)return;
 28         o.bindEvent();
 29     }
 30     $j.extend(fixed.prototype,{
 31         ie6 : $.browser.msie && $.browser.version < 7.0,
 32         bindEvent : function(){
 33             var o=this;
 34             o.sts.target.css('position','absolute')
 35             o.overRelative().initBasePos();
 36             o.sts.target.css(o.sts.basePos)
 37             o.sts.container.scroll(o.scrollEvent()).resize(o.resizeEvent());
 38             o.setPos();
 39         },
 40         overRelative : function(){
 41             var o=this;
 42             var relative = o.sts.target.parents().filter(function(){
 43                 if($j(this).css('position')=='relative')return this;
 44             })
 45             if(relative.size()>0)relative.after(o.sts.target)
 46             return o;
 47         },
 48         initBasePos : function(){
 49             var o=this;
 50             o.sts.basePos = {
 51                 top: o.sts.target.offset().top - (o.sts.currentCss.top=='auto'?o.sts.container.scrollTop():0),
 52                 left: o.sts.target.offset().left - (o.sts.currentCss.left=='auto'?o.sts.container.scrollLeft():0)
 53             }
 54             return o;
 55         },
 56         setPos : function(){
 57             var o=this;
 58             o.sts.target.css({
 59                 top: o.sts.container.scrollTop() + o.sts.basePos.top,
 60                 left: o.sts.container.scrollLeft() + o.sts.basePos.left
 61             })
 62         },
 63         scrollEvent : function(){
 64             var o=this;
 65             return function(){
 66                 o.setPos();
 67             }
 68         },
 69         resizeEvent : function(){
 70             var o=this;
 71             return function(){
 72                 setTimeout(function(){
 73                     o.sts.target.css(o.sts.currentCss)      
 74                     o.initBasePos();
 75                     o.setPos()
 76                 },1)    
 77             }           
 78         }
 79     })
 80 })(jQuery)
 81 
 82 jQuery(function($j){
 83     $j('#footer').positionFixed()
 84 })
 85 
 86 //pop右下角弹窗函数
 87 //作者:yanue
 88 function Pop(title,url,intro){
 89     this.title=title;
 90     this.url=url;
 91     this.intro=intro;
 92     this.apearTime=1000;
 93     this.hideTime=500;
 94     this.delay=10000;
 95     //添加信息
 96     this.addInfo();
 97     //显示
 98     this.showDiv();
 99     //关闭
100   this.closeDiv();
101 }
102 Pop.prototype={
103   addInfo:function(){
104     $("#popTitle a").attr('href',this.url).html(this.title);
105     $("#popIntro").html(this.intro);
106     $("#popMore a").attr('href',this.url);
107   },
108   showDiv:function(time){
109         if (!($.browser.msie && ($.browser.version == "6.0") && !$.support.style)) {
110       $('#pop').slideDown(this.apearTime).delay(this.delay).fadeOut(400);;
111     } else{//调用jquery.fixed.js,解决ie6不能用fixed
112       $('#pop').show();
113             jQuery(function($j){
114                 $j('#pop').positionFixed()
115             })
116     }
117   },
118   closeDiv:function(){
119       $("#popClose").click(function(){
120             $('#pop').hide();
121           }
122     );
123   }
124 }

 

posted on 2014-01-24 14:08  slnt  阅读(1354)  评论(0编辑  收藏  举报

导航