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

最新推荐文章于 2023-11-30 13:40:47 发布
最新推荐文章于 2023-11-30 13:40:47 发布
阅读量2.7k 收藏 4
点赞数
分类专栏： js&jquery 文章标签： jquery javascript

最近需要实现一个登陆后页面右下角弹出提示层的功能，便找了一些素材，并再次记录一下。效果图：

页面代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery实现网页右下角悬浮层提示</title>
        <style type="text/css">
            *{margin:0;padding:0;list-style-type:none;}
            a,img{border:0;}
            body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

            /* pop */
            #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>
    </head>
    <body style="height:1200px;" οnlοad="loadhtml();">
        <script  type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
        <script type="text/javascript">
            (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)
            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();
                    }
                );
              }
            }
        </script>
        <script type="text/javascript" >
        //页面加载调用
        window.οnlοad=function(){
            //使用参数：1.标题，2.链接地址，3.内容简介
            new Pop("HELLO!",
                "https://blog.csdn.net/wqlinloveruby",
                "此处填写提示内容！");
        }
        </script>
        <div id="pop" style="display:none;">
            <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"><a href="https://blog.csdn.net/wqlinloveruby" target="_blank">查看 »</a></p>
            </div>
        </div>
        <div style="text-align:center;clear:both">
        <p>jquery 右下角弹窗提示</p>
        <p><a href="https://blog.csdn.net/wqlinloveruby" target="_blank">欢迎关注</a></p>
        </div>
    </body>
</html>


                

        

        

    




    

      

        

            

              
                
                  Lynn
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    4
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
jquery-只对新用户弹一次窗

				
			

			

				

					pyhui的技术博客
				

				

					07-08
					
					409
					
				

			

		

		

			
				
只对首次访问的新用户，进行一次弹窗
先完成一个弹窗
alert(内容）
对弹窗行为进行验证
在什么情况下才会进行弹窗
设计
用户进行访问，我们先查一下，他的cookie中是否有一个键值对存在
键值对我们自己定义
比如，定义键is_visitted  ，是否访问过
如果首次请求网站，它必然没有这个键值对
获取这个is_visitted对应的值的时候 ，会得到undefined
给这个用户一个cook...

			
		

	



                

              
                



	

		

			

				
					
jQuery写登录弹窗并居中显示

				
			

			

				

					滕青山博客
				

				

					11-24
					
					1258
					
				

			

		

		

			
				
需求

做一个登录弹框，点击登录按钮就弹出，点击右上角×就关闭
居中显示，并且随着窗口变化而变化
让除了弹框以外区域灰色，也就是加个遮罩图层


效果
先放下仿照的效果图：

代码
HTML

<div class="box_lg" style="display: none">
    <div class="box_tit">
        <a class="close" href="#">×</a>
        <div class="log

			
		

	



                


  
              

                


	

		

			

				
					
jQuery实现在右下角弹出提示框

				
			

			

				

					Cynthia9023的专栏
				

				

					10-22
					
					3337
					
				

			

		

		

			
				
用jQuery实现这个功能其实非常简单，网上的例子太多太多了。不过，那些例子一般没有涉及到后台往前台传值的问题。在本文中这个问题会得到解决。
在实际应用中，提示框都是自动弹出的，因此，jQuery函数需写在jsp页面的之外，即在标签之外写一个标签，这样，在加载jsp页面的内容之前会先执行这里面的方法。然后，弹出框其实就是一个div层，满足条件就显示这个层，在div中则可以显示由后台传过来的值，进

			
		

	





	

		

			

				
					
jquery点击弹出登陆窗口

				
			

			

				

					ICode联盟
				

				

					12-29
					
					911
					
				

			

		

		

			
				
下载地址

jquery点击按钮弹出登陆窗口，非常简单好用，结构非常简单，弹出动画非常流畅，是div弹框编辑非常方便。$(".theme-login").click(function(){ $(".theme-popover-mask").fadeIn(100); $(".theme-popover").slideDown(200); }) $(".theme-poptit .close").click(function(){ $(".theme-popover-mask").fadeOut(100); $

			
		

	



		

			
		



	

		

			

				
					
基于jQuery弹出框的登录实现

				
			

			

				

					admin__istrator的博客
				

				

					07-18
					
					679
					
				

			

		

		

			
				
点击登录会出现现下面的弹窗

点击取消弹框会没有

下面展示一些 内联代码片。
源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device.

			
		

	





	

		

			

				
					
jQuery-实现右下角自动弹窗提示.zip

				
			

			

				

					07-11
				

			

		

		

			
				
本教程将深入探讨如何使用jQuery实现一个右下角自动弹窗提示的功能，这个功能常见于许多网站，用于通知用户更新、提醒或者提供交互信息。  首先，要实现这个功能，我们需要确保网页中已经引入了jQuery库。这通常通过...

			
		

	





	

		

			

				
					
jQuery Messager 右下角弹窗插件

				
			

			

				

					05-12
				

			

		

		

			
				
内容索引:脚本资源,jQuery,右下角,弹窗　jquery messager 右下角弹窗插件，方便在网页右下角弹出窗口，可弹出一个标准的弹窗、一个含有标题和自定义内容的弹窗，可显示Flash的弹窗，版本1.5更新： 　1、修正设置不...

			
		

	





	

		

			

				
					
jQuery右下角弹窗插件

				
			

			

				

					09-17
				

			

		

		

			
				
**jQuery右下角弹窗插件详解**  在网页开发中，弹窗是一种常见的交互元素，用于展示通知、警告、确认信息或提供用户交互界面。jQuery作为一款轻量级的JavaScript库，提供了丰富的API来简化DOM操作，使得创建弹窗插件...

			
		

	





	

		

			

				
					
JS右下角弹窗两例JS右下角弹窗两例

				
			

			

				

					11-21
				

			

		

		

			
				
首先，jQuery右下角弹窗是一种利用jQuery库高效简便实现弹窗的方式。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互。要创建右下角弹窗，首先需要在项目中引入jQuery库。接着，...

			
		

	





	

		

			

				
					
Jquery右下角弹窗

				
			

			

				

					01-23
				

			

		

		

			
				
本教程将深入探讨如何使用jQuery实现右下角弹窗功能，类似于QQ的新闻弹窗，为用户提供即时信息提示。  首先，让我们理解jQuery的核心概念。jQuery库通过一个"$"函数作为入口点，允许开发者快速选择DOM元素并执行各种...

			
		

	





	

		

			

				
					
HTML网页右下角弹出消息通知提示框

					
最新发布

				
			

			

				

					SmileSunshines的博客
				

				

					11-30
					
					1587
					
				

			

		

		

			
				
Naranja网页右下角弹出消息通知提示框js代码，点击按钮触发，包含了4种消息提示框样式：默认(log)、成功(success)、警告(warn)、危险 (error)。

			
		

	





	

		

			

				
					
JQuery  EasyUI实现登陆小窗口

				
			

			

				

					十年饮冰，难凉热血
				

				

					08-01
					
					2196
					
				

			

		

		

			
				
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  
    ">
    欢迎登录
	js/themes/default/easyui.

			
		

	





	

		

			

				
					
【WPF】右下角弹出自定义通知样式（Notification）——简单教程

					
热门推荐

				
			

			

				

					catshitone的专栏
				

				

					07-13
					
					1万+
					
				

			

		

		

			
				
1.先看效果2.实现1.主界面是MainWindow上面就只摆放一个Button即可。在Button的点击事件中需要new一个弹出的NotificationWindow。代码如下： public static List<NotificationWindow> _dialogs = new List<NotificationWindow>();
 int i = 0;
 private void Bu

			
		

	





	

		

			

				
					
右下角提示框

				
			

			

				

					浪里淘沙
				

				

					12-26
					
					2468
					
				

			

		

		

			
				
这是在bootstrap上修改的需要引入bootstrap不多说直接上代码
1.HTML

    
        关闭
        
    
    

2.css样式
.pop{position: fixed;right:10px;bottom:10px;box-shadow: 0 5px 15px rgba(0,0,0,.5);}
.popHead{background:#ff

			
		

	





	

		

			

				
					
layui提示框改造右下通知框（参考svg）

				
			

			

				

					万万没想到的博客
				

				

					08-08
					
					7513
					
				

			

		

		

			
				
实现后样式： 
    

1.首先创建CSS样式：



@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i');


.toast__container {
    display: table-cell;
    v...

			
		

	





	

		

			

				
					
网站右下角弹出通知效果的制作

				
			

			

				

					混世者的专栏
				

				

					05-07
					
					2940
					
				

			

		

		

			
				
很多网站都有通知和消息的弹出窗口，一般都是在右下角部分，而且可以随着页面的滚动始终保持在右下角，且浮动于最上层，也就是说你不会因为点击了当前页面而使得通知窗口隐藏了。重要的一点是，该窗口中的内容是实时从数据库或其他远程部分中取来，不是简单的一个登陆欢迎通知。这当然就是Ajax的强项了。如果这个窗口的CSS做的再漂亮点的话，那效果就更好了。这里，我就说说如何制作这样的弹出窗口。首先，要明确我们做

			
		

	





	

		

			

				
					
jQuery实现消息提示框

				
			

			

				

					weixin_47838176的博客
				

				

					03-08
					
					8293
					
				

			

		

		

			
				
创建一个消息提示方法


/**
 * 弹出消息提示框，采用浏览器布局，位于整个页面中央，默认显示3秒
 * 后面的消息会覆盖原来的消息
 * @param message：待显示的消息
 * @param type：消息类型，0：错误消息，1：成功消息
 */
function showMessage(message, type) {
    let messageJQ= $("<div class='showMessage'>" + message + "</div>");
  

			
		

	





	

		

			

				
					
jquery右下角弹出提示框

				
			

			

				

					技术博客
				

				

					06-24
					
					3635
					
				

			

		

		

			
				
功能描述：定时刷新由在线预定订单，动态提醒客户又新的订单需要处理。
工具：jquery.messager.js

 首先下载插件：http://www.corrie.net.cn/demo/messager/jquery.messager.rar，可以查看压缩包里的demo.htm文件，来了解怎么使用此插件！~~
       1、先将jquery.js 和jquery.message.j

			
		

	





	

		

			

				
					
2019最佳弹窗/弹出框设计20例【附教程】

				
			

			

				

					设计“1+2”，摹客就够了！
				

				

					06-21
					
					9853
					
				

			

		

		

			
				
弹窗/弹出框是APP或者网站与用户交互常见的方式之一。不同的网页弹窗和App弹框适用于不用的场景，弹窗的设计直接影响用户体验。不知道如何提高弹出框的用户体验设计？



小编从优质网站精心挑选了20例弹窗/弹出框例子，供大家寻找设计灵感。



1. 邮件订阅弹窗/弹出框



在平时我们浏览网站时，通常会遇到附于页面底部的网页弹框设计。Weebly的弹出框设计与主题色相呼应，内容仅有文字、...

			
		

	





	

		

			

				
					
jquery推送消息,实现类似于美团的右下角弹窗

				
			

			

				

					06-23
				

			

		

		

			
				
### 回答1：
要实现类似于美团的右下角弹窗，可以借助jQuery的推送消息功能来完成。具体步骤如下：

首先，需要在页面里引入jQuery的库文件。

其次，编写相应的html、css和js代码，实现弹窗的样式和内容。可以在页面上任意位置添加一个隐藏的div元素，用来存储弹窗的具体内容和样式。比如：

```html
<div id="push-message" style="display:none">
    <div class="push-message-header">
        <span class="push-message-title">新品上线啦！</span>
        <a class="push-message-close">×</a>
    </div>
    <div class="push-message-body">
        <img src="new-product.png" alt="新品图片">
        <p>快来抢购新品，先到先得！</p> 
    </div>
</div>
```

然后，在js代码中，使用jQuery的animate()方法来实现弹窗动画效果，并调用setTimeout()方法来控制弹窗的显示时间和关闭按钮的点击事件。代码示例如下：

```javascript
$(document).ready(function(){
    // 弹窗显示动画效果
    $("#push-message").animate({bottom:"20px"}, 1000);
    // 弹窗自动隐藏
    setTimeout(function(){
        $("#push-message").fadeOut();
    }, 5000);
    // 关闭按钮点击事件
    $(".push-message-close").click(function(){
        $("#push-message").fadeOut();
    });
});
```

最后，需要在页面中调用该js文件，使弹窗能够正常显示和关闭。

总体来说，实现类似于美团的右下角弹窗并不难，只需要按照上述步骤进行相应的设置和调整即可。  

### 回答2：
实现类似于美团的右下角弹窗，可以使用jQuery推送消息的方法。

具体实现步骤如下：

1.在页面底部引入jQuery库文件。

2.定义一个DIV标签作为弹窗容器，设置其样式为固定定位，底部距离为0，右侧距离为0，宽度和高度自定义大小。

3.编写jQuery代码，实现弹窗的弹出和隐藏：

a)当页面加载完成时，设置弹窗容器的初始位置为底部右侧隐藏状态；

b)当触发某个事件时（如点击按钮事件），在弹窗容器中添加需要显示的内容，并将容器位置从底部右侧滑动到底部左侧显示状态；

c)当点击弹窗容器的关闭按钮时，将容器从底部左侧滑动到底部右侧隐藏状态。

4.可根据需求自定义弹窗的点击事件、弹出/隐藏动画效果和定时器等。

总之，使用jQuery推送消息完成类似于美团的右下角弹窗功能，是一种简单、方便、易用的实现方式。  

### 回答3：
要实现类似于美团右下角弹窗的效果，可以使用jQuery推送消息插件。该插件支持在网页中创建自定义的弹窗，并按照设定的方式进行推送。

首先，在页面中引入jQuery库和jquery推送消息插件，之后可以在JavaScript文件中进行如下操作：

1. 定义推送消息的内容和样式：

var options = {
  'title': '新消息提醒',
  'text': '您有一条新的优惠信息，快来看看吧！',
  'sticky': true,
  'time': '',
  'class_name': 'my-sticky-class'
};

2. 调用插件的弹窗方法：

$.sticky(options);

其中，options是一个对象，包含了弹窗的标题（title）、内容（text）、是否固定不消失（sticky）、自动关闭的时间（time）、自定义类名（class_name）等参数。

3. 设定弹窗的样式和位置：

.sticky {
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  color: #444444;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  margin-top: 10px;
  padding: 10px 15px;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 300px;
}

通过调整样式和位置，可以使弹窗呈现出美观且醒目的效果。

总之，使用jQuery推送消息插件，可以轻松实现类似于美团右下角弹窗的效果，且可根据需求进行自定义设置。

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值