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 ...
随机推荐
- aufac在mvc中多线程
注册的时候 将容器放到静态变量中 xxx.IocContainer = builder.Build(); var resolver = new AutofacDepende ...
- jmeter中提取json串
https://blog.csdn.net/zha6476003/article/details/80295068
- uniapp如何将微信小程序API封装为Promise
var SYNC_API_RE = /requireNativePlugin|upx2px|hideKeyboard|canIUse|^create|Sync$|Manager$/; var CALL ...
- day09 函数学习
内容详细 1.函数 1.1.面向过程: 可读性差/可重用差 1.2.面向对象:
- 小妖精的完美游戏教室——东方PROJECT，同人，子机
//================================================================//// Copyright (C)// All Rights Re ...
- hello1 hello2 服务器安装加部署全过程
1.安装maven和glassfish及配置环境变 首先搜索并下载maven3.6.0和glassfish4.1.1(版本看按需要选择). 点击安装包进行安装 安装完成后开始配置环境变量 打开系统环境 ...
- 引擎设计跟踪(九.14.3.1) deferred shading: Depthstencil as GBuffer depth
问题汇总 1.Light support for Editor编辑器加入了灯光工具, 可以添加和修改灯光. 问题1. light object的用户互交.point light可以把对应的volume ...
- c# 实现 HSV 调色板
界面相关核心代码如下: public partial class Form1 : Form { public Form1() { InitializeComponent(); } private vo ...
- Linux 配置SSH免密登陆
1.在hadoop01服务器上 通过ssh -keygen 生成公私钥 [ssh-keygen -t dsa -P '' -f ~/.ssh/id_dsa] 2.把公钥给hadoop02服务器 3. ...
- 思科模拟器-DHCP配置
一.如图做好以下拓扑图(下图我取消显示端口号) 二.配置最下面的四台上网终端为自动获取ip 三.配置中间的二层交换机:添加vlan,同时所有端口设为access类型并将其加入vlan中,以下以swit ...