用Jquery的$.fn.extend()做了小弹窗插件,可惜还不能很好在IE6上工作。。。下面是demo的几个文件,IE6上的工作就交给ie6_tipWindow.js了,有些兼容性问题没弄好,哎,有附源文件~
· Jquery做的弹窗插件tipWindow.js
/* *这是用JQuery编写的弹出窗口插件会自动将使用popUpWin的Html元素设置为弹出窗口,并放置到右下角 *调用popWindow函数将会使弹出窗口弹出 *popUpWin插件可以用popDown来选择隐藏的动画样式,目前只支持none(直接隐藏)和slip(滑动隐藏)两种样式 */ $.fn.extend({ ie6fixedbug: function ie6fixedbug () { var args = arguments; $(this).css("position", "absolute"); var m = (window.screen.height - $(this).height()) / 2; var obj = $(this)[0]; obj.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + args[0] + 'px'; window.onscroll = function () { obj.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + args[0] + 'px'; } window.onresize = function () { obj.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + args[0] + 'px'; } } }); $.fn.extend({ popUpWin : function() { var args = arguments; //保存传入的参数列表 var $this = this; if($.browser.msie&&($.browser.version == "6.0")&&!$.support.style) { $this.css({position : "absolute"}); } else { $this.css({position : "fixed"}); } $this.css({display : "none", right : "5px"}); //设置弹窗的样式将对象置到右下角 var $showBottom = 0; //设置对象显示时的bottom值 //保存对象的实际高度 var $winHeight = $this.outerHeight(); var $hiddenBottom = -$winHeight; //设置对象隐藏时的bottom值 if($.browser.msie&&($.browser.version == "6.0")&&!$.support.style) { $(this).ie6fixedbug(10); } else { $this.css("bottom" , $hiddenBottom + "px"); //将对象隐藏到视口以外 } //将对象第一个连接子元素设置为隐藏按钮并绑定click事件 var $elem = this.find("a:first"); $elem.click(function() { if(args[0]["popdown"] == "none") //当popdown设置为none时 $this.css("display" , "none"); else if(args[0]["popdown"] == "slip") { //当popdown设置为slip时 $this.animate({bottom : ($hiddenBottom + "px")} , 450); } }); }, //调用popWindow使弹窗弹出 popWindow : function() { var $this = this; var $id = $this.attr("id") ? "#" + $this.attr("id") : "." + $this.attr("class"); var $ii = $this.attr("id"); $this.css("display" , "block"); if($.browser.msie) $this.animate({bottom : -1}, 450); else $this.animate({bottom : 0}, 450); } });
$.fn.extend({ popUpWinIE : function() { var obj = $(this)[0]; window.onload = getMsg; window.onresize = resizeDiv; window.onerror = function(){} //短信提示使用(asilas添加) var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0; function getMsg() { try{ divTop = parseInt(obj.style.top,10) divLeft = parseInt(obj.style.left,10) divHeight = parseInt(obj.offsetHeight,10) divWidth = parseInt(obj.offsetWidth,10) docWidth = document.body.clientWidth; docHeight = document.body.clientHeight; obj.style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;// divHeight obj.style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth obj.style.visibility="visible" objTimer = window.setInterval("moveDiv()",10) } catch(e){} } function resizeDiv() { i+=1 if(i>500) closeDiv() try{ divHeight = parseInt(obj.offsetHeight,10) divWidth = parseInt(obj.offsetWidth,10) docWidth = document.body.clientWidth; docHeight = document.body.clientHeight; obj.style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10) obj.style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10) } catch(e){} } function moveDiv() { try { if(parseInt(obj.style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10))) { window.clearInterval(objTimer) objTimer = window.setInterval("resizeDiv()",1) } divTop = parseInt(obj.style.top,10) obj.style.top = divTop - 1 } catch(e){} } function closeDiv() { obj.style.visibility='hidden'; if(objTimer) window.clearInterval(objTimer) } } });
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="reset.css" /> <!--重置浏览器样式--> <!--[if IE 6]> <style type="text/css"> * html,* html body{background-image:url(about:blank);background-attachment:fixed} </style> <![endif]--> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="tipWindow.js"></script> <style type="text/css"> #tipWin { background: url(images/bg_pop_window.png) left top no-repeat; width: 279px; height: 186px; position: fixed; } #hiddenButton, #hiddenButton:link { border: none; border-width: 0; /*IE 6 BUG*/ border-style: none; /*IE 6 BUG*/ display: block; margin: -18px 15px 0px 245px; padding: 2px 2px 2px 2px; background: url(images/hiddenButton.png) left top no-repeat; } #hiddenButton img { border: none; border-width: 0; /*IE 6 BUG*/ border-style: none; /*IE 6 BUG*/ } .popWinTitle { display: block; margin: 5px 0 0 5px; font: 0.9em "幼圆"; color: #666; } </style> <script type="text/javascript"> $(function(){ $('#tipWin').popUpWin({ "popdown" : "none" }); $('#tipWin').popWindow(); $('#try').ie6fixedbug(100); }); </script> <title>无标题文档</title> </head> <body> <div id="try">123</div> <div style="height: 1000px; width: 100px;"></div> <div id="tipWin"> <span class="popWinTitle">消息提示</span> <a id="hiddenButton" href="javascript:;"><img src="images/hiddenButton.png" /></a> </div> </body> </html>
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { padding: 0; margin: 0; font-size: 100%; font-weight: normal; } table { border-collapse: collapse; border-spacing: 0; } td, th, caption { font-weight: normal; text-align: left; } img, fieldset { border: 0px; } ol { padding-left: 1.4em; list-style: decimal; } ul { padding-left: 1.4em; list-style:square; } q:before, q:after { content:''; } *{padding: 0; margin: 0;};