JS 实现右下角弹窗
<!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 实现右下角弹窗的更多相关文章
- 纯js的右下角弹窗
<html> <head> <title></title> <meta charset="UTF-8"> <scr ...
- js右下角弹窗代码(实测好用)
实测好用的js右下角弹窗代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- jquery实现登录后右下角弹窗提醒（附带简单样式）
页面代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- js实现右下角可关闭最小化div
本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm效果图片: ...
- winform右下角弹窗
网页是否经常在电脑右下角弹窗显示消息?其实Winform也是可以实现的.下面介绍两种方法. 第一步:设计窗体 第二步:实现代码 第一种方法 引用user32 声明常量 窗体Load事件 窗体FormC ...
- Winform实现右下角弹窗_提示信息
网页是否经常在电脑右下角弹窗显示消息?其实Winform也是可以实现的.下面介绍两种方法. 第一步:设计窗体 第二步:实现代码 第一种方法 引用user32 声明常量 窗体Load事件 窗体FormC ...
- react.js插件开发,x-dailog弹窗浮层组件
react.js插件开发,x-dailog弹窗浮层组件 我认为,每一个组件都应该有他自带的样式和属性事件回调配置.所以我会给x-dialog默认一套简单的样式,和各种默认的配置项.所有react插件示 ...
- [C++] 自己主动关闭右下角弹窗
近期腾讯.迅雷等各种client,都越发喜欢在屏幕的右下角弹框了. 有骨气的人当然能够把这些软件卸载了事,可是这些client在某些情况下却又还是实用的.怎么办呢? 作为码农,自己实现一个自己主动关闭 ...
- 【Winform-右下角弹窗】实现右下角弹窗，提示信息
网页是否经常在电脑右下角弹窗显示消息?其实Winform也是可以实现的.下面介绍两种方法. 第一步:设计窗体 第二步:实现代码 第一种方法 引用user32 声明常量 窗体Load事件 窗体FormC ...
随机推荐
- 安卓开发学习之Menu
安卓开发中菜单是一个很重要的组件,从安卓开发文档(http://wear.techbrood.com/guide/index.html)中可以看到,安卓UI设计中的Menu主要分为: A.Option ...
- Could not find a version that satisfies the requirement PIL
Python Imageing Library 简称 PIL Python常用的图像处理库之一 Pillow是PIL一个fork. C:\Users\dangzhengtao>pip insta ...
- 时间Date.js
<span style="line-height: 25.2px;">/** * 日期解析,字符串转日期 * @param dateString 可以为2017-02- ...
- spring 动态代理
突然想到AOP,就简单回忆一下动态代理.1.什么是动态代理? 假如有个用户有增删该查4个方法,如果要对用户操作后进行日志记录,可能会有人说直接在增删改查后做日志记录就行. 一旦我想在用户操作之前加一个 ...
- What is the Annotation?
Annotation称为注释或注解,它是一个接口.注解提供了一种为程序元素(类.方法.成员变量等)设置元数据(描述其它数据的数据)的方法.编译器.开发工具或其它程序中可以通过反射来获取程序中的Anno ...
- gtest 三种事件机制
前言: 1.首先说明gtest中事件的结构层次: 测试程序:一个测试程序只有一个main函数,也可以说是一个可执行程序是一个测试程序.该级别的事件机制会在程序的开始和结束执行. 测试套件:代表一个测试 ...
- python padas 学习
import matplotlib from pandas import DataFrame import numpy as np import pandas as pd import MySQLdb ...
- Ubuntu16.04 换阿里源
国内阿里源速度比较快,北京联通下载极快.更新也比较稳定 1.备份 cp /etc/apt/source.list /etc/apt/source.list.bak 2.编辑source文件 sudo ...
- Linux内核笔记：内存管理
逻辑地址由16位segment selector和offset组成 根据segment selector到GDT或LDT中去查找segment descriptor 32位base,20位limit, ...
- Day 15 模块
模块 ```python'''模块:一系列功能的集合体 定义模块:创建一个py文件就是一个模块,该py文件名就是模块名 使用模块:在要使用模块的文件中,通过 import 模块名 来导入模块''' ' ...