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 ...
随机推荐
- mysql 创建用户、设置权限
MySQL创建用户与授权 一. 创建用户 命令: CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明: username:你将创建的用 ...
- Python3.7和数据库MySQL交互(二)SQLyog安装教程
首先安装MySQL数据库,初学者建议选择图形化客户端. Toad for MySQL.MySQL-Front.Navicat for MySQL.SQLyog. 官方下载链接: Toad for My ...
- SQLI DUMB SERIES-13
(1)检测闭合方式 通过 ') 闭合. (2)尝试输入 admin')# 无回显.尝试报错注入, 爆表payload: admin') and extractvalue(1,concat(0x7e,( ...
- POJ1064 Cable master（二分 浮点误差）
题目链接:传送门 题目大意: 给出n根长度为1-1e5的电线,想要从中切割出k段等长的部分(不可拼接),问这个k段等长的电线最长可以是多长(保留两位小数向下取整). 思路: 很裸的题意,二分答案即可. ...
- 改变highCharts的X轴和Y轴的数据刻度
xAxis:{ tickPixelInterval:10 //自行调整X轴刻度的间距}, yAxis:{ lineWidth:1, //Y轴默认不显示Y轴线,添加一个轴线的宽度就可以显示出来 tick ...
- JAVA乐观锁、悲观锁实现
一.名词解释 1.悲观锁:认为每次对数据库的操作(查询.修改)都是不安全的,因此每次操作都会把这条数据锁掉,直到本次操作完毕释放该锁 2.乐观锁:查询数据的时候总是认为是安全的,不会锁数据:等到更新数 ...
- js vue 请求
. Vue 的 GET 请求 var vm = new Vue({ el: '#app', data: { resp: {}, api_url: '/index', }, methods: { get ...
- 关于WebService
转自于:https://www.cnblogs.com/xdp-gacl/p/4048937.html 一.序言 大家或多或少都听过 WebService(Web服务),有一段时间很多计算机期刊.书籍 ...
- 链路聚合trunk实现
用户需求 1,在原有网络基础上实现用户接入Internet 2,监控摄像头不改变原有功能 配置思路 1,首先确定接入交换机是否为管理型交换机 2, 确认接入交换机管理IP 3,划分Vlan 创建tr ...
- ARM Cortex M0 程序映像和启动流程