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,jquery闭包概念分析
Jun 19 Javascript
jQuery load方法用法集锦
Dec 06 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 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防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
python实现类的静态变量用法实例
2015/05/08 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
django中的图片验证码功能
2019/09/18 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
社会实践心得体会
2014/01/03 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
学生个人自我鉴定
2014/03/26 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
临床专业自荐信
2014/06/22 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
公司表扬稿范文
2015/05/05 职场文书
初一军训感言
2015/08/01 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
会计做账心得体会
2016/01/22 职场文书