js实现右下角提示框的方法

本文实例讲述了js实现右下角提示框的方法。分享给大家供大家参考。具体实现方法如下：

实现右下角提示框的Jquery插件 （popup.js）

//兼容ie6的fixed代码   

//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右下角弹窗函数  

function Pop(title,url,intro){  

    this.title=title;  

    this.url=url;  

    this.intro=intro;  

    this.apearTime=1000;  

    this.hideTime=500;  

    this.delay=10000;  

    //添加信息  

    this.addInfo();  

    //显示  

    this.showDiv();  

    //关闭  

  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{//调用jquery.fixed.js,解决ie6不能用fixed  

      $('#pop').show();  

            jQuery(function($j){  

                $j('#pop').positionFixed()  

            })  

    }  

  },  

  closeDiv:function(){  

      $("#popClose").click(function(){  

            $('#pop').hide();  

          }  

    );  

  }  

}

右下角提示框实例

<!DOCTYPE HTML>  

<html>  

<head>  

    <meta charset="UTF-8">  

    <title>jquery右下角pop弹窗</title>  

</head>  

<body>  

<h2>请看浏览器有下角</h2>  

<!--jquery右下角pop弹窗start -->  

<script type="text/javascript" >  

      window.onload=function(){  

            var pop=new Pop("这里是标题，哈哈",  

            "URL超链接",  

            "请输入你的内容简介，这里是内容简介.请输入你的内容简介，这里是内容简介.请输入你的内容简介，这里是内容简介");  

        }  

</script>  

<script type="text/javascript" src="jquery.min.js"></script>  

<script type="text/javascript" src="popup.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;position: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:'微软雅黑';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="关闭">关闭</a>  

    <h2>温馨提示</h2>  

    </div>  

    <div id="popContent">  

    <dl>  

        <dt id="popTitle">这里是标题</dt>  

        <dd id="popIntro">这里是内容简介</dd>  

    </dl>  

    <p id="popMore">查看 »</p>  

    </div>  

</div>  

<!--右下角pop弹窗 end-->  

<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/>jquery右下角弹窗   

</body>  

</html>

希望本文所述对大家的javascript程序设计有所帮助。