javascript实现的右下角弹窗实例


Posted in Javascript onApril 24, 2015

本文实例讲述了javascript实现的右下角弹窗的方法。分享给大家供大家参考。具体如下:

<!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=gb2312" />
<title>右下角的弹窗</title>
<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(){
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>
内容展示内容展示内容展示内容展示内容展示
内容展示内容展示内容展示内容展示内容展示
内容展示内容展示内容展示内容展示内容展示
<hr>
<div id="silu">
<button onclick="tips_pop()">测试按钮</button>
</div>
<div id="winpop">
<div class="title">您有新的消息
<span class="close" onclick="tips_pop()">X</span></div>
<div class="con">未读信息(1)</div>
</div>
<div>https://3water.com/</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Jquery 的扩展方法总结
Oct 01 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
javascript生成随机数的方法
May 16 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
JavaScript严格模式详解
Nov 18 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 Javascript
js上传图片及预览功能实例分析
Apr 24 #Javascript
浅谈jquery事件处理
Apr 24 #Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 #Javascript
JS实现简单的键盘打字的效果
Apr 24 #Javascript
javascript中replace( )方法的使用
Apr 24 #Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 #Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 #Javascript
You might like
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现简单socket通信的方法
2016/04/19 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
python实现的Iou与Giou代码
2020/01/18 Python
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
食堂员工工作职责
2013/12/18 职场文书
初中美术教学反思
2014/01/29 职场文书
梅花魂教学反思
2014/04/25 职场文书
事业单位鉴定材料
2014/05/25 职场文书
校车安全责任书
2014/08/25 职场文书
验房委托书
2014/08/30 职场文书
消防验收申请报告
2015/05/15 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server