jquery右下角pop弹窗与类似discuz右下角消息提示框

pop.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右下角弹窗函数
//作者:yanue
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();
    }
    );
  }
}

调用方法非常简单

 代码如下 复制代码

<script type="text/javascript" >
 //记得加载jquery
 //使用参数:1.标题,2.链接地址,3.内容简介
 window.onload=function(){
var pop=new Pop("这里是标题,哈哈",
"http://www.111cn.net",
"请输入你的内容简介,这里是内容简介.请输入你的内容简介,这里是内容简介.请输入你的内容简介,这里是内容简介");
}
</script>

实例

 

 代码如下 复制代码

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>jquery右下角pop弹窗 完美兼容ie6789 ff chrome</title>
<meta name="author" content="yanue" />
<meta name="copyright" content="powered by yanue:yanue.info" />
<meta name="keywords" content="jquery右下角pop弹窗 类似discuz右下角消息提示框 完美漂亮 完全兼容 简单好用">
<meta name="description" content="代码下载+演示 简单好用 jquery右下角pop弹窗 类似discuz右下角消息提示框 完美漂亮 完全兼容 通过jquery.fixed.js插件实现兼容">
</head>
<body>
<h2>请看浏览器有下角</h2>
<h4>完美漂亮 完全兼容 主要是用css position的fixed属性,但是ie6不支持此属性,通过jquery.fixed.js插件实现兼容 通过jquery.fixed.js插件实现兼容</h4>

<!--jquery右下角pop弹窗start -->
<script type="text/javascript" >
   //记得加载jquery
   //作者:yanue
   //使用参数:1.标题,2.链接地址,3.内容简介
   window.onload=function(){
   var pop=new Pop("这里是标题,哈哈",
   "www.111cn.net",
   "请输入你的内容简介,这里是内容简介.请输入你的内容简介,这里是内容简介.请输入你的内容简介,这里是内容简介");
  }
</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;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"><a href="http://www.111cn.net/" target="_blank">这里是参数</a></dt>
  <dd id="popIntro">这里是内容简介</dd>
 </dl>
 <p id="popMore"><a href="http://www.zhutiy.com/" target="_blank">查看 »</a></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/>zhel
</body>
</html>

自己去下载来试一下吧  哈哈

注意:jquery包我们这里就不提供了大家可自行去下载。

时间: 2024-08-24 18:24:30

jquery右下角pop弹窗与类似discuz右下角消息提示框的相关文章

类似QQ的消息提示框,如何实现在框内消息的分页功能

问题描述 我做的时候框内消息是通过cs文件拼的html返给js的 解决方案 解决方案二:ajax再到服务器数据再分页解决方案三:使用ajax解决方案四:你的方法可行解决方案五:可以用ajax方式,翻一页,就到服务器去取一次;也可以一次性全读出来,在通过cs文件拼的html的时候,作处理,通过for等方式把每一页的数据存到一个js数组中,在页面中翻页时,再通过js去数组中取;或者在通过cs文件拼的html的时候,每拼十条数据时,在后面加#next_page#字符,然后再在js中用split("#n

jQuery消息提示框插件Tipso_jquery

今天我们用Tipso插件来演示八种不同提示效果,并且了解下Tipso API. <div class="dowebok"> <h2>1.默认</h2> <div class="inner"> <span id="tip1" data-tipso="dowebok.com">Tipso</span> </div> </div> 演示一

PHP 实现类似js中alert() 提示框_php实例

主要应用于添加判断提示,跳转,返回,刷新. 复制代码 代码如下: /**  * JS提示跳转  * @param  $tip  弹窗口提示信息(为空没有提示)  * @param  $type 设置类型 close = 关闭 ,back=返回 ,refresh=提示重载,jump提示并跳转url  * @param  $url  跳转url  */ function alert($tip = "", $type = "", $url = "")

基于JQuery 的消息提示框效果代码_jquery

详细内容请下载附件 附件下载 先看一下效果: 内容都集合到一个1.58KB的js文件里 复制代码 代码如下: var returnurl = ''; var messagebox_timer; $.fn.messagebox = function (message, url, type, delay) { clearTimeout(messagebox_timer); $("#msgprint").remove(); var m_body = $(this); delay = (typ

TIPSO--基于JQUERY的消息提示框插件,用起来蛮顺手

项目产品经理要求, 呵呵,关于描述,十个字以内的,直接显示,多于十个字的,用消息框提示: 相关模板及JS如下:   $(function() { $('.tip').tipso({ useTitle: false, background: '#3366cc' }); }); {% if item.description|length > 10 %} <span class="tip" data-tipso={{ item.description }} >{{ item

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

本文实例讲述了js实现右下角提示框的方法.分享给大家供大家参考.具体实现方法如下: 实现右下角提示框的Jquery插件 (popup.js) 复制代码 代码如下: //兼容ie6的fixed代码   //jQuery(function($j){  //    $j('#pop').positionFixed()  //})  (function($j){      $j.positionFixed = function(el){          $j(el).each(function(){ 

.NET调用API实现右下角定时弹窗

问题描述 要实现的功能很简单思路:.NET调用API实现右下角定时弹窗,上面有个关闭按钮,用户可以自己关闭,若用户没有关闭,则过一段时间后,自己关闭:下次弹窗的时候,给窗体控件重新赋值,再弹窗,如此循环往复现在我遇到的问题:弹窗的时候,窗体是阻塞的,用户无法操作窗体,我不知道这么弄,现在正处于摸索阶段,希望大家能够帮一下我--控制整体流程的代码如下:DateTimedtstart=DateTime.Now;DateTimedtend=DateTime.Now;publicintTimeInter

jquery右下角弹出提示框示例代码_jquery

复制代码 代码如下: <!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=&qu

想开发一个类似人人网右下角的在线聊天功能??

问题描述 我想开发一个类似人人网右下角的在线聊天功能,主要功能有31.可以实时显示在线好友(不想要定时刷新数据库的方式,因为占资源太大,当然Ajax是必需的)2.加好友并分组3.在线聊天请问各位有没有代码或参考资料-多谢 解决方案 解决方案二:顶一下!解决方案三:没有做过.帮顶解决方案四:没有做过.帮顶解决方案五:我觉得AJAX估计不行,可以用flex,silverlight等,当然这些插件表现出来很小,用户注意不到,然后利用这些插件做跳板,利用其socket通信,这样才会很及时.javascr