js实现右下角提示框

最新推荐文章于 2023-10-03 17:03:53 发布
最新推荐文章于 2023-10-03 17:03:53 发布
阅读量746 收藏
点赞数
分类专栏： javascript jquery 文章标签： jquery javascript


实现右下角提示框的Jquery插件 （popup.js）


//兼容ie6的fixed代码 
//jQuery(function($j){
//    $j('#pop').positionFixed()
//})
(function($j){
    $j.positionFixed = function(el){
        $j(el).each(function(){
            new fixed(this)
        })
        return el;                  
    }
    $j.fn.positionFixed = function(){
        return $j.positionFixed(this)
    }
    var fixed = $j.positionFixed.impl = function(el){
        var o=this;
        o.sts={
            target : $j(el).css('position','fixed'),
            container : $j(window)
        }
        o.sts.currentCss = {
            top : o.sts.target.css('top'),              
            right : o.sts.target.css('right'),              
            bottom : o.sts.target.css('bottom'),                
            left : o.sts.target.css('left')             
        }
        if(!o.ie6)return;
        o.bindEvent();
    }
    $j.extend(fixed.prototype,{
        ie6 : $.browser.msie && $.browser.version < 7.0,
        bindEvent : function(){
            var o=this;
            o.sts.target.css('position','absolute')
            o.overRelative().initBasePos();
            o.sts.target.css(o.sts.basePos)
            o.sts.container.scroll(o.scrollEvent()).resize(o.resizeEvent());
            o.setPos();
        },
        overRelative : function(){
            var o=this;
            var relative = o.sts.target.parents().filter(function(){
                if($j(this).css('position')=='relative')return this;
            })
            if(relative.size()>0)relative.after(o.sts.target)
            return o;
        },
        initBasePos : function(){
            var o=this;
            o.sts.basePos = {
                top: o.sts.target.offset().top - (o.sts.currentCss.top=='auto'?o.sts.container.scrollTop():0),
                left: o.sts.target.offset().left - (o.sts.currentCss.left=='auto'?o.sts.container.scrollLeft():0)
            }
            return o;
        },
        setPos : function(){
            var o=this;
            o.sts.target.css({
                top: o.sts.container.scrollTop() + o.sts.basePos.top,
                left: o.sts.container.scrollLeft() + o.sts.basePos.left
            })
        },
        scrollEvent : function(){
            var o=this;
            return function(){
                o.setPos();
            }
        },
        resizeEvent : function(){
            var o=this;
            return function(){
                setTimeout(function(){
                    o.sts.target.css(o.sts.currentCss)      
                    o.initBasePos();
                    o.setPos()
                },1)    
            }           
        }
    })
})(jQuery)

jQuery(function($j){
    $j('#footer').positionFixed()
})

//pop右下角弹窗函数
function Pop(title,url,intro){
    this.title=title;
    this.url=url;
    this.intro=intro;
    this.apearTime=1000;
    this.hideTime=500;
    this.delay=10000;
    //添加信息
    this.addInfo();
    //显示
    this.showDiv();
    //关闭
  this.closeDiv();
}
Pop.prototype={
  addInfo:function(){
    $("#popTitle a").attr('href',this.url).html(this.title);
    $("#popIntro").html(this.intro);
    $("#popMore a").attr('href',this.url);
  },
  showDiv:function(time){
        if (!($.browser.msie && ($.browser.version == "6.0") && !$.support.style)) {
      $('#pop').slideDown(this.apearTime).delay(this.delay).fadeOut(400);;
    } else{//调用jquery.fixed.js,解决ie6不能用fixed
      $('#pop').show();
            jQuery(function($j){
                $j('#pop').positionFixed()
            })
    }
  },
  closeDiv:function(){
      $("#popClose").click(function(){
            $('#pop').hide();
          }
    );
  }
}



右下角提示框实例


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery右下角pop弹窗</title>
</head>
<body>
<h2>请看浏览器有下角</h2>
<!--jquery右下角pop弹窗start -->
<script type="text/javascript" >
      window.οnlοad=function(){
            var pop=new Pop("这里是标题，哈哈",
            "URL超链接",
            "请输入你的内容简介，这里是内容简介.请输入你的内容简介，这里是内容简介.请输入你的内容简介，这里是内容简介");
        }
</script>
<script type="text/javascript" src="jquery.min。js"></script>
<script type="text/javascript" src="popup。js"></script>
<div id="pop" style="display:none;">
    <style type="text/css">
    *{}{margin:0;padding:0;}
    #pop{}{background:#fff;width:260px;border:1px solid #e0e0e0;font-size:12px;position: fixed;right:10px;bottom:10px;}
    #popHead{}{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;position:relative;font-size:12px;padding:0 0 0 10px;}
    #popHead h2{}{font-size:14px;color:#666;line-height:32px;height:32px;}
    #popHead #popClose{}{position:absolute;right:10px;top:1px;}
    #popHead a#popClose:hover{}{color:#f00;cursor:pointer;}
    #popContent{}{padding:5px 10px;}
    #popTitle a{}{line-height:24px;font-size:14px;font-family:'微软雅黑';color:#333;font-weight:bold;text-decoration:none;}
    #popTitle a:hover{}{color:#f60;}
    #popIntro{}{text-indent:24px;line-height:160%;margin:5px 0;color:#666;}
    #popMore{}{text-align:right;border-top:1px dotted #ccc;line-height:24px;margin:8px 0 0 0;}
    #popMore a{}{color:#f60;}
    #popMore a:hover{}{color:#f00;}
    </style>
    <div id="popHead">
    <a id="popClose" title="关闭">关闭</a>
    <h2>温馨提示</h2>
    </div>
    <div id="popContent">
    <dl>
        <dt id="popTitle">这里是标题</dt>
        <dd id="popIntro">这里是内容简介</dd>
    </dl>
    <p id="popMore">查看 »</p>
    </div>
</div>
<!--右下角pop弹窗 end-->
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>jquery右下角弹窗 
</body>
</html>



文章转载自：  js右下角提示框   http://www.studyofnet.com/news/655.html




whazhl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery.popup.js:适用于您的应用程序的模态和弹出窗口。 支持animate.css
05-11
Jquery.popup.js 适用于您的应用程序的模态和弹出窗口。 支持animate.css。 默认包括 js / jquery.popup.min.js 和最新的jQuery 入门 [removed][removed] [removed][removed] 正在安装 使用的默认值： $('#elem').popup(); 使用click和animate.css： $('.btn').on('click',function () { $('.item').popup({ time: 1000, classAnimateShow: 'rollIn', classAnim
html5 popup,popup.js-jQuery和CSS3可互动的3D弹出窗口插件
weixin_42521424的博客
06-21 550
popup.js是一款使用jQuery和CSS3制作并可以使用鼠标进行互动的3D弹出窗口插件。该3D弹出窗口插件使用简单，并且在旧的浏览器中会回退为非3D状态，兼容IE8+的所有现代浏览器。使用方法使用该3D弹出窗口插件需要在页面中引入popup.css，jquery和popup.js文件。HTML结构首先需要创建一个用于触发弹出窗口的按钮或超链接元素。Show popup然后你可以定义你的弹出窗...
html5 js插件兼容ie8,jquery.popup.js-兼容IE8的简单jQuery模态窗口插件
weixin_42305992的博客
06-17 381
jquery.popup.js是一款简单的兼容IE8浏览器的jQuery模态窗口插件。该模态窗口插件没有过多的参数，通过简单的调用就可以生成带动画过渡效果的模态窗口，非常简洁。使用方法下载压缩包，在页面中引入jQuery和jquery.popup.js文件。HTML结构该模态窗口的基本HTML结构为：创建一个全屏的遮罩层。....在遮罩层内放置模态窗口的内容，以及一个关闭模态窗口的按钮。这是第一个...
简单的tooltip插件: jQuery.popup
weixin_34334744的博客
04-01 75
Document requires: &lt;script type="text/javascript" src="jquery-1.2.3.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery.dimensions.pack.js"&gt;&lt;/
jquery.js 引入失效的一个可能的原因
一个小白的日常
05-23 8881
问题 在写web项目时，引入jquery.js时总是不能正确响应，在浏览器开发者模式下，发现jquery.js没有被找到，状态为404 定位 1.加载其他的js文件，可以成功加载。 2.删除jquery.js所有内容，可以被正确加载。 3.使用jQuery的网络链接，可以被正确加载。 判定为jquery.js本身的问题。 解决方案 1.使用jquery.js百度压缩版引用地址：jquery.js...
弹出层jquery.jmpopups
dpn525的专栏
11-14 132
可以弹出多层，引用 &lt;script type="text/javascript" src="&lt;%=path %&gt;/js/jquery-1.4.2.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="&lt;%=path %&gt;/js/jquery.jmpopups-0.
jquery js封装弹出提示
qq_61869009的博客
10-03 170
js弹窗
dhl:juery提示插件：jquery.Popup.js
weixin_30466421的博客
11-27 126
/* jQuery Dialogs Plugin Cory S.N. LaViska (http://abeautifulsite.net/) Edit by 杜宏雷 2010-10-22 //用法： showLoading(msg, elem) 消息，消息显示的控件id showTip(msg, elem, autoClose) 消息，消息显示的控件id，是否自动关闭 */...
js实现右下角提示框的方法
10-24
主要介绍了js实现右下角提示框的方法,实例分析了Jquery插件popup.js的具体用法,需要的朋友可以参考下
javascript实现简单的页面右下角提示信息框
10-23
本文给大家分享的是使用javascript实现简单的页面右下角提示信息框的方法和示例代码，有需要的小伙伴可以参考下。
jquery.popup.js-兼容IE8的简单jQuery模态窗口插件
04-25
jquery.popup.js-兼容IE8的简单jQuery模态窗口插件
popup.js文件
11-21
popup.js popup.js 弹窗
jQuery弹出层窗口插件popupWindow.js
12-10
popupWindow.js是一款jQuery弹出层窗口插件。该插件能够轻松的制作弹出层模态窗口效果。弹出的窗口支持最大化、最小化、拖拽、改变尺寸等功能。
很好用的Popup.js
08-11
我找了很久才找到的，一个很好用的百度窗体js。方便使用
js网页右下角提示框实例
10-25
主要介绍了js网页右下角提示框的实现方法,以实例展示了css样式与HTML布局,以及对应的js显示与关闭提示框等功能,需要的朋友可以参考下
js右下角弹出提示框示例代码
10-22
主要介绍了js右下角弹出提示框示例代码，即网页右下角弹出广告信息框实例代码，感兴趣的小伙伴们可以参考一下
jQuery组件（Popup）
qq_44657834的博客
05-09 5220
关于Popup 它有两种形式，一种是全屏（默认），一种是显示在底部 1.全屏默认popup 它有一个模板，代码如下： <div id="" class="weui-popup__container"> <div class="weui-popup__overlay"></div> <div class="weui-popup__modal"> 你的内容放在这里... </div> </div> 打开pop
JQuery弹出窗口插件带透明遮罩层
玩火的稻草人的博客
02-07 1699
今天系统中用到了一个带蒙版的弹出窗口，找了一个JQuery的插件，用起来挺方便的，还不错，mark一下，顺便介绍给大家： 直接上代码吧 1、页面HTML文件 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>简单的jQuery弹出层插......
js 浏览器右下角弹窗
最新发布
11-03
JS浏览器右下角弹窗是一种常见的网页设计效果，用于在网页中以弹窗形式显示一些提示信息或通知。 实现这种效果可以通过以下步骤： 1. HTML结构：在网页中添加一个固定定位的div元素作为弹窗容器，并设置其样式为右下角。 2. CSS样式：为弹窗容器设置合适的位置、大小、背景颜色、边框、透明度等样式，使其具有弹窗的效果。 3. JS脚本：通过JavaScript来控制弹窗的显示与隐藏。可以在需要触发弹窗时，通过某个事件（如点击按钮）来调用JS函数，函数内部则控制弹窗的显示。 4. 弹窗内容：可以在弹窗容器内创建其他HTML元素，如文本、图标等，以展示具体的提示信息或通知。 5. 弹窗交互：可以添加一些交互效果，如弹窗显示一段时间后自动关闭，或者提供关闭按钮供用户手动关闭弹窗。 需要注意的是，为了避免弹窗过于打扰用户的浏览体验，应合理控制弹窗的出现频率和显示时间，以及提供关闭的操作方式。 以上是关于JS浏览器右下角弹窗的简单介绍和实现步骤，希望对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值