正文

jquery实现登录后右下角弹窗提醒（附带简单样式）

IP云
IP云V管理员/0 阅读
09/23
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

页面代码如下：

  1.  
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
    <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
    <head>
  4.  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  
    <title>jQuery实现网页右下角悬浮层提示</title>
  6.  
    <style type="text/css">
  7.  
    *{margin:0;padding:0;list-style-type:none;}
  8.  
    a,img{border:0;}
  9.  
    body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
  10.  
     
  11.  
    /* pop */
  12.  
    #pop{background:#fff;width:260px;border:1px solid #e0e0e0;font-size:12px;position:fixed;right:10px;bottom:10px;}
  13.  
    #popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;position:relative;font-size:12px;padding:0 0 0 10px;}
  14.  
    #popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;}
  15.  
    #popHead #popClose{position:absolute;right:10px;top:1px;}
  16.  
    #popHead a#popClose:hover{color:#f00;cursor:pointer;}
  17.  
    #popContent{padding:5px 10px;}
  18.  
    #popTitle a{line-height:24px;font-size:14px;font-family:'微软雅黑';color:#333;font-weight:bold;text-decoration:none;}
  19.  
    #popTitle a:hover{color:#f60;}
  20.  
    #popIntro{text-indent:24px;line-height:160%;margin:5px 0;color:#666;}
  21.  
    #popMore{text-align:right;border-top:1px dotted #ccc;line-height:24px;margin:8px 0 0 0;}
  22.  
    #popMore a{color:#f60;}
  23.  
    #popMore a:hover{color:#f00;}
  24.  
    </style>
  25.  
    </head>
  26.  
    <body style="height:1200px;" onload="loadhtml();">
  27.  
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
  28.  
    <script type="text/javascript">
  29.  
    (function($j){
  30.  
    $j.positionFixed = function(el){
  31.  
    $j(el).each(function(){
  32.  
    new fixed(this)
  33.  
    })
  34.  
    return el;
  35.  
    }
  36.  
    $j.fn.positionFixed = function(){
  37.  
    return $j.positionFixed(this)
  38.  
    }
  39.  
    var fixed = $j.positionFixed.impl = function(el){
  40.  
    var o=this;
  41.  
    o.sts={
  42.  
    target : $j(el).css('position','fixed'),
  43.  
    container : $j(window)
  44.  
    }
  45.  
    o.sts.currentCss = {
  46.  
    top : o.sts.target.css('top'),
  47.  
    right : o.sts.target.css('right'),
  48.  
    bottom : o.sts.target.css('bottom'),
  49.  
    left : o.sts.target.css('left')
  50.  
    }
  51.  
    if(!o.ie6)return;
  52.  
    o.bindEvent();
  53.  
    }
  54.  
    $j.extend(fixed.prototype,{
  55.  
    ie6 : $.browser.msie && $.browser.version < 7.0,
  56.  
    bindEvent : function(){
  57.  
    var o=this;
  58.  
    o.sts.target.css('position','absolute')
  59.  
    o.overRelative().initBasePos();
  60.  
    o.sts.target.css(o.sts.basePos)
  61.  
    o.sts.container.scroll(o.scrollEvent()).resize(o.resizeEvent());
  62.  
    o.setPos();
  63.  
    },
  64.  
    overRelative : function(){
  65.  
    var o=this;
  66.  
    var relative = o.sts.target.parents().filter(function(){
  67.  
    if($j(this).css('position')=='relative')return this;
  68.  
    })
  69.  
    if(relative.size()>0)relative.after(o.sts.target)
  70.  
    return o;
  71.  
    },
  72.  
    initBasePos : function(){
  73.  
    var o=this;
  74.  
    o.sts.basePos = {
  75.  
    top: o.sts.target.offset().top - (o.sts.currentCss.top=='auto'?o.sts.container.scrollTop():0),
  76.  
    left: o.sts.target.offset().left - (o.sts.currentCss.left=='auto'?o.sts.container.scrollLeft():0)
  77.  
    }
  78.  
    return o;
  79.  
    },
  80.  
    setPos : function(){
  81.  
    var o=this;
  82.  
    o.sts.target.css({
  83.  
    top: o.sts.container.scrollTop() + o.sts.basePos.top,
  84.  
    left: o.sts.container.scrollLeft() + o.sts.basePos.left
  85.  
    })
  86.  
    },
  87.  
    scrollEvent : function(){
  88.  
    var o=this;
  89.  
    return function(){
  90.  
    o.setPos();
  91.  
    }
  92.  
    },
  93.  
    resizeEvent : function(){
  94.  
    var o=this;
  95.  
    return function(){
  96.  
    setTimeout(function(){
  97.  
    o.sts.target.css(o.sts.currentCss)
  98.  
    o.initBasePos();
  99.  
    o.setPos()
  100.  
    },1)
  101.  
    }
  102.  
    }
  103.  
    })
  104.  
    })(jQuery)
  105.  
    function Pop(title,url,intro){
  106.  
    this.title=title;
  107.  
    this.url=url;
  108.  
    this.intro=intro;
  109.  
    this.apearTime=1000;
  110.  
    this.hideTime=500;
  111.  
    this.delay=10000;
  112.  
    //添加信息
  113.  
    this.addInfo();
  114.  
    //显示
  115.  
    this.showDiv();
  116.  
    //关闭
  117.  
    this.closeDiv();
  118.  
    }
  119.  
    Pop.prototype={
  120.  
    addInfo:function(){
  121.  
    $("#popTitle a").attr('href',this.url).html(this.title);
  122.  
    $("#popIntro").html(this.intro);
  123.  
    $("#popMore a").attr('href',this.url);
  124.  
    },
  125.  
    showDiv:function(time){
  126.  
    if (!($.browser.msie && ($.browser.version == "6.0") && !$.support.style)) {
  127.  
    $('#pop').slideDown(this.apearTime).delay(this.delay).fadeOut(400);;
  128.  
    } else{//调用jquery.fixed.js,解决ie6不能用fixed
  129.  
    $('#pop').show();
  130.  
    jQuery(function($j){
  131.  
    $j('#pop').positionFixed()
  132.  
    })
  133.  
    }
  134.  
    },
  135.  
    closeDiv:function(){
  136.  
    $("#popClose").click(function(){
  137.  
    $('#pop').hide();
  138.  
    }
  139.  
    );
  140.  
    }
  141.  
    }
  142.  
    </script>
  143.  
    <script type="text/javascript" >
  144.  
    //页面加载调用
  145.  
    window.onload=function(){
  146.  
    //使用参数：1.标题，2.链接地址，3.内容简介
  147.  
    new Pop("HELLO!",
  148.  
    "https://blog.csdn.net/wqlinloveruby",
  149.  
    "此处填写提示内容！");
  150.  
    }
  151.  
    </script>
  152.  
    <div id="pop" style="display:none;">
  153.  
    <div id="popHead"> <a id="popClose" title="关闭">关闭</a>
  154.  
    <h2>温馨提示</h2>
  155.  
    </div>
  156.  
    <div id="popContent">
  157.  
    <dl>
  158.  
    <dt id="popTitle"></dt>
  159.  
    <dd id="popIntro"></dd>
  160.  
    </dl>
  161.  
    <p id="popMore"><a href="https://blog.csdn.net/wqlinloveruby" target="_blank">查看 »</a></p>
  162.  
    </div>
  163.  
    </div>
  164.  
    <div style="text-align:center;clear:both">
  165.  
    <p>jquery 右下角弹窗提示</p>
  166.  
    <p><a href="https://blog.csdn.net/wqlinloveruby" target="_blank">欢迎关注</a></p>
  167.  
    </div>
  168.  
    </body>
  169.  
    </html>