<!DOCTYPE HTML>

    <head>

        <title>JS实现右下角弹窗</title>

        <meta http-equiv="content-type" content="text/html;charset=UTF-8">

        <style type="text/css">

            .win-pop {

                width: 200px;

                height: 0;

                position: absolute;

                right: 0;

                bottom: 0;

                border: 1px solid #999999;

                padding: 5px;

                overflow: hidden;

                font-weight: bold;

                display: none;

                background: #FFF;

                font-size: 12px;

            }

            .win-pop .title {

                width: 100%;

                height: 30px;

                line-height: 30px;

                background: #FFCC00;

                text-align: center;

                font-size: 14px;

            }

            .win-pop .con {

                width: 100%;

                height: 80px;

                color: #FF0000;

                text-decoration: underline;

            }

            .close {

                position: absolute;

                right: 5px;

                top: -3px;

                color: #FFF;

                cursor: pointer;

            }

        </style>

        <script type="text/javascript">

            function tips_pop() {

                var msgPop = document.getElementById("#winPop");

                var popH = parseInt(msgPop.style.height);

                if(popH === 0) {

                    msgPop.style.display = "block";

                    show = setInterval("changeH('up')", 2);

                } else {

                    hide = setInterval("changeH('down')", 2);

                }

            }

            function changeH(str) {

                var msgPop = document.getElementById("#winPop");

                var popH = parseInt(msgPop.style.height);

                if(str === "up") {

                    if(popH <= 100) {

                        msgPop.style.height = (popH + 4).toString() + "px";

                    } else {

                        clearInterval(show);

                    }

                }

                if(str === "down") {

                    if(popH >= 4) {

                        msgPop.style.height = (popH - 4).toString() + "px";

                    } else {

                        clearInterval(hide);

                        msgPop.style.display = "none";

                    }

                }

            }

            window.onload = function() {

                document.getElementById("#winPop").style.height = "0px";

                setTimeout("tips_pop()", 800);

            }

        </script>

    </head>

    <body>

        <div id="winPop" class="win-pop">

            <div class="title">您有新的消息

                <span class="close" onclick="tips_pop()">x</span>

            </div>

            <div class="con">信息内容框</div>

        </div>

    </body>

</html>

JS 实现右下角弹窗的更多相关文章

  1. 纯js的右下角弹窗

    <html> <head> <title></title> <meta charset="UTF-8"> <scr ...

  2. js右下角弹窗代码(实测好用)

    实测好用的js右下角弹窗代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

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

    页面代码如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  4. js实现右下角可关闭最小化div

    本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm效果图片: ...

  5. winform右下角弹窗

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

  6. Winform实现右下角弹窗_提示信息

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

  7. react.js插件开发,x-dailog弹窗浮层组件

    react.js插件开发,x-dailog弹窗浮层组件 我认为,每一个组件都应该有他自带的样式和属性事件回调配置.所以我会给x-dialog默认一套简单的样式,和各种默认的配置项.所有react插件示 ...

  8. [C++] 自己主动关闭右下角弹窗

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

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

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

随机推荐

  1. 测试那些事儿—软测必备的Linux知识（三）

    ubantu 打开命令提示符的方法:点击左上角图标输入terminal 1.系统管理 1.1 shutdown,系统关机命令 -h:关机        -r:重启 shutdown -h now 立即 ...

  2. Node版本管理工具-NVM的安装与使用(windows系统)

    友情提示:为避免踩坑,建议浏览全文后动手操作!!! 一.nvm是什么 看到这篇文章的猿/媛们肯定不会问这个问题了,但是我还是要说,哈哈哈! 无论工作还是干嘛,就不会一直做项目,所以肯定也不会一直用一个 ...

  3. 增加删除的js

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  4. pycharm汉化补丁

    将压缩包内容复制到 x:\xxx\JetBrains\PyCharm Community Edition 2019.1\lib 目录下 链接:https://pan.baidu.com/s/1TLEP ...

  5. vpdn1

    在使用L2TP协议构建的VPDN典型组网中,包含LAC和LNS两部分. 1.LAC LAC表示L2TP访问集中器(L2TP Access Concentrator),是附属在交换网络上的具有PPP端系 ...

  6. django 分页组件

      一.仿django分页功能自己实现 urls.py 1 2 3 4 5 6 7 8 9 from django.conf.urls import url from django.contrib i ...

  7. C51单片机_day_01（定时器和中断系统）

                c51单片机 51单片机是控制电路系统的开关,当然芯片就是51芯片,现在随着科技的发展,也是出了很多,功能更多,更全的芯片. 51是用c语言做为程序编程的语言 ——我对基本基础 ...

  8. python 集成cython && push 测试pip 仓库

    昨天创建了一个简单的python 集成cython 的项目 master 但是有几个问题 目前的构建时基于make 同时需要本地执行,为了方便基于pip 的安装,做了如下调整 项目准备 项目使用ven ...

  9. ffmpeg-4.1.1-win64-dev在vs2017的搭建

    没得话讲,先在官网下载对应的源码,下载dev/文件夹下的源码和静态链接库  ,下载/shared文件夹下的动态链接库 官网地址:https://ffmpeg.zeranoe.com/builds/wi ...

  10. 为服务器设置SSL证书，配置Https协议

    注意 服务器要打开443端口 1.申请证书,这里推荐腾讯云或者阿里云的,有免费的证书,要求不高的盆友可以试一试 2.打开php.ini扩展. extension=php_openssl.dll 3.打 ...