zoukankan      html  css  js  c++  java

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

    页面代码如下：

    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;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>
  • 相关阅读:
    php 小试 mysql-zmq-plugin 和 pthreads
    svn：previous operation has not finished
    Http Header里的Content-Type
    sublime text使用及常见问题
    Less:优雅的写CSS代码
    gulp：更简单的自动化构建工具
    js实现『加载更多』功能实例
    JSONP浅析
    使用JSSDK集成微信分享遇到的一些坑
    JavaScript模板引擎实例应用
  • 原文地址：https://www.cnblogs.com/niudaxianren/p/10948598.html
Copyright © 2011-2022 走看看