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 }