页面代码如下：

  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. 解决jquery click事件执行两次

    js 解决办法 event.preventDefault() :阻止默认行为,可以用 event.isDefaultPrevented() 来确定preventDefault是否被调用过了 event ...

  2. 温故知新的错题训练：Coin game

    传送门:http://192.168.173.163/JudgeOnline/problem.php?cid=1244&pid=1 输赢规则:无法再放下硬币的人就输. 博弈论的基本假定:他俩都 ...

  3. php处理复选框

    1．HTML <form action="getData.php" method="post" enctype="multipart/form- ...

  4. Mysql备份参数

    --all-databases , -A 导出全部数据库. mysqldump -uroot -p --all-databases --all-tablespaces , -Y 导出全部表空间. my ...

  5. react 实现圆环进度条

    import React, { useState, useEffect } from "react" import { css } from "emotion" ...

  6. ASP.NET MVC 用户权限-1

    MVC框架的开发网站的利器,MVC框架也开始越来越流行了.对于.NET ,微软也发布了MVC框架,做网站通常要涉及到用户的权限管理,对于.NET MVC 框架的用户权限管理又应该怎样设置呢?下面通过示 ...

  7. 02 Django虚拟环境搭建

    01 创建虚拟环境目录 该目录用于存放所有虚拟环境. cd / mkdir venv cd venv 02 创建当前项目的虚拟环境 virtualenv --python=/usr/bin/pytho ...

  8. 《深入理解Java虚拟机》读书笔记一

    第二章 Java内存区域与内存溢出异常 1.运行时数据区域 程序计数器: 当前线程所执行的字节码的行号指示器,用于存放下一条需要运行的指令. 运行速度最快位于处理器内部. 线程私有. 虚拟机栈: 描述 ...

  9. 2019杭电多校 permutation2

    Problem:http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1007&cid=852 #include<bits ...

  10. C++ windows线程操作（转）

    参考 1._beginthreadex创建线程 DWORD m_dwMSGTID; // 线程ID HANDLE m_hMSG; // 线程句柄 m_hMSG = (HANDLE)_beginthre ...