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

时间：2022-08-30 12:59: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>

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

  1. winform右下角弹窗

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

  2. Winform实现右下角弹窗&lowbar;提示信息

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

  3. &lbrack;C&plus;&plus;&rsqb; 自己主动关闭右下角弹窗

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

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

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

  5. &lbrack;C&plus;&plus;&rsqb; 自动关闭右下角弹窗

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

  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. 在 Typescript 2&period;0 中使用 &commat;types 类型定义

    在 Typescript 2.0 中使用 @type 类型定义 基于 Typescript 开发的时候,很麻烦的一个问题就是类型定义.导致在编译的时候,经常会看到一连串的找不到类型的提示.解决的方式经 ...

  2. EF &ndash&semi; 7&period;一对多关联

    5.6.8 <一对多关联(上)> 5.6.9 <一对多关联(下)> 一对多的关联,可以说是整个数据库应用程序中最常见的一种关联类型了,因此,必须高度重视这种关联类型CRUD的实 ...

  3. poj 2536 Gopher II &lpar;二分匹配&rpar;

    Gopher II Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 6345   Accepted: 2599 Descrip ...

  4. linux下log4j乱码解决

    使用log4j的时候,在WIN系统的时候正常显示中文,但是发布到linux系统的时候中文就显示成乱码了 由于log4j配置文件中没有设置编码格式(encoding),所以log4j就使用系统默认编码. ...

  5. oracle随机取数据

    select * from (select rownum,KEYWORD, CATEGORY,CREATE_DATE,UPDATE_DATE from (select * from knet_keyw ...

  6. 2016-9-6 批量给文件名的前面加上&OpenCurlyDoubleQuote;igeek&lowbar;高薪就业” 2、&Tab;利用FileInputStream和FileOutputStream复制文件

    在此只列出典型题目,有的题目扫一眼就有代码的不去浪费时间了,想要完整题目的评论留邮箱,看到就发.持续更新中... 1.批量给文件名的前面加上“igeek_高薪就业” package com.work; ...

  7. 制作java可执行程序的方法

    命令行方法: 1. 创建Manifest.txt文件,内容: Main-Class: com.mkyong.awt.AwtExample 2.打包所有的class,包括Manifest.txt文件: ...

  8. Spring MVC中基于注解的 Controller

         终于来到了基于注解的 Spring MVC 了.之前我们所讲到的 handler,需要根据 url 并通过 HandlerMapping 来映射出相应的 handler 并调用相应的方法以响 ...

  9. 【攻防实战】SQL注入演练！

    这篇文章目的是让初学者利用SQL注入技术来解决他们面临的问题, 成功的使用它们,并在这种攻击中保护自己. 1.0 介绍 当一台机器只打开了80端口, 你最依赖的漏洞扫描器也不能返回任何有用的内容, 并 ...

  10. PS调出最美海滨城市俯拍照

    原图 一.找一张漂亮的风景照片,美丽的海滩. 二.打开PS做效果把图片放进去然后ctrl+j复制一层,添加滤镜-模糊-特殊模糊. 三.然后在这个图层的基础上添加滤镜-滤镜库-干画笔效果. 四.这个时候 ...

相关文章