页面代码如下：

  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>

jquery实现登录后右下角弹窗提醒（附带简单样式）的更多相关文章

  1. winform右下角弹窗

    网页是否经常在电脑右下角弹窗显示消息?其实Winform也是可以实现的.下面介绍两种方法. 第一步:设计窗体 第二步:实现代码 第一种方法 引用user32 声明常量 窗体Load事件 窗体FormC ...

  2. Winform实现右下角弹窗_提示信息

    网页是否经常在电脑右下角弹窗显示消息?其实Winform也是可以实现的.下面介绍两种方法. 第一步:设计窗体 第二步:实现代码 第一种方法 引用user32 声明常量 窗体Load事件 窗体FormC ...

  3. [C++] 自己主动关闭右下角弹窗

    近期腾讯.迅雷等各种client,都越发喜欢在屏幕的右下角弹框了. 有骨气的人当然能够把这些软件卸载了事,可是这些client在某些情况下却又还是实用的.怎么办呢? 作为码农,自己实现一个自己主动关闭 ...

  4. 【Winform-右下角弹窗】实现右下角弹窗，提示信息

    网页是否经常在电脑右下角弹窗显示消息?其实Winform也是可以实现的.下面介绍两种方法. 第一步:设计窗体 第二步:实现代码 第一种方法 引用user32 声明常量 窗体Load事件 窗体FormC ...

  5. [C++] 自动关闭右下角弹窗

    最近腾讯.迅雷等各种客户端,都越发喜欢在屏幕的右下角弹框了. 有骨气的人当然可以把这些软件卸载了事,但是这些客户端在某些情况下却又还是有用的.怎么办呢? 作为码农,自己实现一个自动关闭右下角弹窗的程序 ...

  6. 去除phpcms会员登录后头部登陆条的会员名称的括号

    phpcms会员登录后显示会员名称是带括号的,现在把他修改成不带括号. 找到函数库libs/functions/global.func.php,修改如下即可: function get_nicknam ...

  7. 修改phpcms会员登录后头部登陆条的会员名称不带括号

    phpcms会员登录后显示会员名称是带括号的,现在把他修改成不带括号. 找到函数库libs/functions/global.func.php,修改如下即可: function get_nicknam ...

  8. win7登录后开机密码破解读取

    在win7登录后,win7密码可以直接读取. https://github.com/gentilkiwi/mimikatz

  9. 超级管理员登录后如果连续XX分钟没有操作再次操作需要重新登录

    首先在设置session页面时 session_start(); session("name",$adminname); //加入session时间 time() session( ...

随机推荐

  1. VScode usage

    Common settings editor.minimap.enabled     //close the preview workbench.editor.show tabs  // show f ...

  2. PP: Sequence to sequence learning with neural networks

    From google institution; 1. Before this, DNN cannot be used to map sequences to sequences. In this p ...

  3. Win10下Pytorch和配置和安装

    Pytorch的安装 注意:Pytorch的版本,cuda版本,cudnn版本,Python版本,nvidia驱动版本要相互对应,否则就会出现各种报错和问题,无法使用GPU加速计算! 查看nvida驱 ...

  4. vue学习指南：第十五篇(详细) - Vuex

    Vuex 一.基础 1. Vuex 相当于 vue的数据仓库 2. Vuex 是 vue 的状态管理工具 3. Vuex中的 state 只能通过mutations 改变 4. Vuex很适合做购物车 ...

  5. LED Decorative Light Supplier - LED Neon Application: 5 Advantages

    In the past 100 years, lighting has gone a long way. LED decorative lighting is now designed to meet ...

  6. Hibernate：对象关系映射（一对一，一对多，多对一，多对多）

    如需转载,请说明出处:http://www.cnblogs.com/gudu1/p/6895610.html Hibernate通过关系映射来表示数据库中表与表之间的关系,关系映射可以通过两种方式:配 ...

  7. python3练习100题——016

    今天的题目比较容易了,旨在让人掌握datetime模块下的一些用法. 链接:http://www.runoob.com/python/python-exercise-example16.html 题目 ...

  8. Java基础小知识（一）

     序言:“不积跬步,无以至千里.不积小流,无以成江海.”每一个庞大的知识架构都是由无数个小知识点慢慢积累起来的,没有量变的积累,就没有质变上的飞跃,成功往往离不开积累. 今天就和大家分享一些我在学习J ...

  9. 阿里云 Linux 挂在硬盘 翻了几篇这个最好

    原文 :https://www.jianshu.com/p/fa587bbfbb60 阿里云数据盘挂载完整过程 阿里云挂载云盘第一步 在阿里云管理员后台,云盘管理中心挂载好云盘在哪个服务器上面. 登录 ...

  10. C++-HDU1394-Minimum Inversion Number[数据结构][树状数组]

    给出0~n-1的一个排列,可以整体移动,求逆序对最小值 把数字num[i]的加入,等价于树状数组的第n-num[i]位加1 因为num[i]是第 (n-1)-num[i]+1=n-num[i]大的数字 ...