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 相关文章推荐
javascript 函数速查表
Feb 07 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
Vue slot用法(小结)
Oct 22 Javascript
javascript实现弹幕墙效果
Nov 28 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
解决Nuxt使用axios跨域问题
Jul 06 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生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
纯php生成随机密码
2015/10/30 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
用python生成1000个txt文件的方法
2018/10/25 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
优秀女职工事迹材料
2014/02/06 职场文书
高三高考决心书
2014/03/11 职场文书
联欢晚会主持词
2014/03/25 职场文书
公安学专业求职信
2014/07/27 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
单位委托函范文
2015/01/29 职场文书