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 相关文章推荐
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 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
wordpress之wp-settings.php
2007/08/17 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
python实现得到一个给定类的虚函数
2014/09/28 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
python实现按行切分文本文件的方法
2016/04/18 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
python实现八大排序算法(2)
2017/09/14 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
民用住房租房协议书
2014/10/29 职场文书
一年级小学生评语大全
2014/12/25 职场文书
律政俏佳人观后感
2015/06/09 职场文书
贫困生证明范文
2015/06/16 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
详解TypeScript的基础类型
2022/02/18 Javascript