网页JS右下角弹出框

最新推荐文章于 2022-10-01 08:38:55 发布
最新推荐文章于 2022-10-01 08:38:55 发布
阅读量725 收藏
点赞数
分类专栏： JavaScript 文章标签： JS弹出框 网页弹出框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangchb/article/details/79178548
版权
 <!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>右下角的弹窗</title>
  </head>
  <style type="text/css">
    body { background:#333333;}
    #winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #999999; margin:0; padding:1px; overflow:hidden; display:none; background:#FFFFFF}
    #winpop .title { width:100%; height:20px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:center; font-size:12px;}
    #winpop .con { width:100%; height:80px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center}
    #silu { font-size:13px; color:#999999; position:absolute; right:0; text-align:right; text-decoration:underline; line-height:22px;}
    .close { position:absolute; right:4px; top:-1px; color:#FFFFFF; cursor:pointer}
  </style>
  <script type="text/javascript">
    function tips_pop(){
      // 弹出框效果JS
      var MsgPop=document.getElementById("winpop");//获取窗口这个对象,即ID为winpop的对象
      var popH=parseInt(MsgPop.style.height);//用parseInt将对象的高度转化为数字,以方便下面比较
      if (popH==0){         //如果窗口的高度是0
        MsgPop.style.display="block";//那么将隐藏的窗口显示出来
        show=setInterval("changeH('up')",2);//开始以每0.002秒调用函数changeH("up"),即每0.002秒向上移动一次
      }
      else {         //否则
        hide=setInterval("changeH('down')",2);//开始以每0.002秒调用函数changeH("down"),即每0.002秒向下移动一次
      }
    }
    function changeH(str) {
      var MsgPop=document.getElementById("winpop");
      var popH=parseInt(MsgPop.style.height);
      if(str=="up"){     //如果这个参数是UP
        if (popH<=100){    //如果转化为数值的高度小于等于100
          MsgPop.style.height=(popH+4).toString()+"px";//高度增加4个象素
        }
        else{  
        clearInterval(show);//否则就取消这个函数调用,意思就是如果高度超过100象度了,就不再增长了
        }
      }
      if(str=="down"){
        if (popH>=4){       //如果这个参数是down
          MsgPop.style.height=(popH-4).toString()+"px";//那么窗口的高度减少4个象素
        }
        else{        //否则
          clearInterval(hide);    //否则就取消这个函数调用,意思就是如果高度小于4个象度的时候,就不再减了
          MsgPop.style.display="none";  //因为窗口有边框,所以还是可以看见1~2象素没缩进去,这时候就把DIV隐藏掉
        }
      }
    }
    window.οnlοad=function(){    //加载
      document.getElementById('winpop').style.height='0px';
      setTimeout("tips_pop()",800);     //3秒后调用tips_pop()这个函数
    }
  </script>
  <body>
    <div id="silu">
    js效果，右下角弹出框
    <button οnclick="tips_pop()">测试按钮</button>
  </div>
  <div id="winpop">
   <div class="title">您有新的消息<span class="close" οnclick="tips_pop()">X</span></div>
      <div class="con"><a href="www.baidu.com">未读信息(66666)</a></div>
  </div>
</body>
</html>
芝麻酱堂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js网页右下角弹出提示框
04-23
网页右下角自动弹出提示框，js实现，简单易懂，非常实用；此为转发他人
js右下角弹框
07-09
收集了3中js弹框，拿来就能用，总有一款属于你
【jQuery】纯js的右下角弹窗
热门推荐
编程记录，亲测有效
07-28 1万+
这个弹窗是如下图的效果： 打开网页的时候，这个弹窗会淡入，之后点击右上角的关闭按钮，其实就是一个& times;会淡出。 采用淡入淡出是因为直接Jquery一个fadeIn与fadeOut省事。如果采用窗口自下而上地移动，还要考虑div的position设置问题，这个问题还涉及一系列兼容性问题，很严重。 之所以称之为纯js的右下角弹窗，是因为，在任意页面，只需要如下引入Jquery之
网页右下角弹出信息框
陆的博客
06-04 1413
网页右下角弹信息框             #winpop         {             width: 200px;             height: 0px;             position: absolute;             right: 0;             bottom: 0;             border: 1p
用JavaScript在网页右下角弹出窗口
猪头肉的专栏
01-06 1003
在右下角弹出窗口，常用于广告代码，或一些大网站的用户信息提示，并且会自动隐藏，可以设置时间间隔，弹出窗口的位置和大小，当然，窗口内容全靠你定了，将JS保存为JS文件，方便你调用。   网页右下角的信息框 #winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:
页面右下角弹出提示框示例代码js版
10-27
右下角弹出提示框想必大家不会陌生吧，本文简单的为大家实现一个，具体代码如下，有需求的朋友可以参考下
js点击按钮右下角弹出消息通知提示框代码
06-11
在JavaScript编程中，实现点击按钮后在屏幕右下角弹出消息通知提示框是一项常见的功能，主要用于向用户显示系统状态或操作反馈。本教程将详细讲解如何创建这种通知提示框，包括默认、成功、警告和危险四种不同类型的...
jquery右下角弹出提示框示例代码
10-26
标题中的“jquery右下角弹出提示框示例代码”是指使用jQuery库来创建一个在网页右下角显示的提示框。这个提示框通常用于显示通知、广告或者其他重要的信息，以吸引用户的注意力。描述提到“在jquery中具体的实现”，...
js右下角弹出提示框示例代码
10-22
主要介绍了js右下角弹出提示框示例代码，即网页右下角弹出广告信息框实例代码，感兴趣的小伙伴们可以参考一下
js右下角消息弹出通知插件notyf
06-24
**JS右下角消息弹出通知插件Notyf详解** 在现代Web开发中，用户交互体验至关重要，其中一种常见的提升用户体验的方式就是实时反馈，比如通过消息弹出通知。`notyf`是一款轻量级的JavaScript插件，专为实现这种功能...
网页右下角弹出消息的JS提示框
07-24
采用纯JavaScript技术实现，当登录后网页的右下角弹出小型消息框，如csdn右下角的效果......或许对你很有帮助哟......
javaScript实现网页右下角弹出窗口(模拟qq消息)代码
04-07
javaScript实现网页右下角弹出窗口(模拟qq消息)代码，js 模拟qq消息 右下角弹窗 html广告插件 js广告插件
html右下角弹框源码
07-27
网页右下角弹框源码，纯javascript代码，需要jquery支持
js 实现右下角视频弹窗
05-30
js实现右下角视频弹窗。ie6789 火狐 谷歌测试兼容
JS实现IE浏览器最小化在桌面右下角弹窗显示
05-26
IE浏览器最小化在桌面右下角弹窗显示, 用的很多框架都是在页面的右下角显示，后来项目要用到最小化后有实时信息提示。所以就想了想搞出这个东西共享出来
自动弹出网页右下角消息提示框特效
a708964454的专栏
09-26 2012
<!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"> <meta http-equ
Web页面右下角弹出窗口示例代码
hftyhv的博客
01-23 452
Web页面右下角弹出窗口示例代码
js网页右下角弹窗js特效
ICode联盟
10-01 423
js网页右下角弹窗特效，js仿360安全卫士弹窗代码。
JS 实现右下角弹窗
weixin_30800987的博客
10-27 793
<!DOCTYPE HTML> <head> <title>JS实现右下角弹窗</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <style type="text/...
用python写一个简单的web网站含有桌面右下角小窗口弹窗，要求用django框架和vue框架
最新发布
03-31
抱歉，作为AI语言模型，我无法提供您想要的完整程序代码。但是，我可以向您介绍相关的框架和技术，以帮助您开始编写您的网站。 Django是一个使用Python编写的高级Web框架，它提供了许多功能和工具，以使Web开发变得简单和快速，并提供了安全性和可扩展性。在Django中，您可以轻松创建数据库模型、视图、URL路由和模板等组件，以快速构建Web应用程序。 Vue.js是一个流行的前端框架，它使用JavaScript语言，可以帮助您构建交互式用户界面。Vue.js提供了许多组件和工具，使您能够轻松地创建动态页面和单页应用程序。 下面是一个简单的示例，使用Django和Vue.js创建一个具有弹出窗口的Web应用程序： 1. 安装Django和Vue.js 首先，您需要安装Django和Vue.js。请参阅官方文档以获取有关如何安装这些框架的说明。 2. 创建Django项目 使用Django的命令行工具创建一个新项目： ``` django-admin startproject myproject ``` 这将创建一个名为“myproject”的新Django项目。 3. 创建Django应用程序 使用Django的命令行工具创建一个新应用程序： ``` python manage.py startapp myapp ``` 这将创建一个名为“myapp”的新Django应用程序。 4. 创建Vue.js应用程序 在Django项目的根目录中创建一个名为“myapp”的新文件夹： ``` mkdir myapp ``` 在“myapp”文件夹中创建一个新的Vue.js应用程序： ``` vue create . ``` 这将创建一个名为“myapp”的新Vue.js应用程序。 5. 添加Vue.js组件 在Vue.js应用程序中，您可以创建一个名为“Popup.vue”的新组件，它将显示在桌面右下角。例如： ``` <template> <div class="popup"> <div class="popup-content"> <h2>My Popup</h2> <p>Hello, world!</p> </div> </div> </template> <script> export default { name: 'Popup' } </script> <style scoped> .popup { position: fixed; bottom: 0; right: 0; width: 200px; height: 100px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); z-index: 9999; } .popup-content { padding: 10px; } </style> ``` 6. 添加Django视图 在Django应用程序中，您可以创建一个名为“views.py”的新文件，其中包含一个名为“popup”的新视图，它将渲染Vue.js组件。例如： ``` from django.shortcuts import render def popup(request): return render(request, 'myapp/popup.html') ``` 7. 添加Django URL路由 在Django应用程序中，您可以创建一个名为“urls.py”的新文件，其中包含一个名为“popup”的新URL路由，它将映射到视图。例如： ``` from django.urls import path from . import views urlpatterns = [ path('popup/', views.popup, name='popup'), ] ``` 8. 添加Django模板 在Django应用程序中，您可以创建一个名为“popup.html”的新模板，其中包含一个名为“popup”的新HTML元素，它将呈现Vue.js组件。例如： ``` {% extends 'base.html' %} {% block content %} <div id="app"> <popup></popup> </div> {% endblock %} ``` 9. 集成Vue.js和Django 在Vue.js应用程序的“main.js”文件中，您可以添加以下代码，以将Vue.js组件渲染到Django模板中： ``` import Vue from 'vue' import Popup from './components/Popup.vue' new Vue({ el: '#app', components: { Popup }, template: '<Popup />' }) ``` 在Django模板中，您可以添加以下代码，以包含Vue.js应用程序的JavaScript文件： ``` {% block scripts %} {{ block.super }} <script src="{% static 'myapp/main.js' %}"></script> {% endblock %} ``` 10. 运行Django服务器 最后，您可以使用以下命令启动Django服务器： ``` python manage.py runserver ``` 您可以在Web浏览器中访问http://localhost:8000/myapp/popup/，以查看包含弹出窗口的Web应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值