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 获取网页参数系统
Jul 19 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
layui弹出层效果实现代码
May 19 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
原生JS实现拖拽功能
Dec 16 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
Discuz! Passport 通行证整合
2008/03/27 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
php发送与接收流文件的方法
2015/02/11 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
部署Python的框架下的web app的详细教程
2015/04/30 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
python实现AES加密和解密
2019/03/27 Python
python:动态路由的Flask程序代码
2019/11/22 Python
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
介绍一下Ruby的特点
2013/01/20 面试题
事业单位辞职信范文
2014/01/19 职场文书
家长对小学生的评语
2014/01/28 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
运动会跳远广播稿
2015/08/19 职场文书
医德医风学习心得体会
2016/01/25 职场文书
改造DE1103三步曲
2022/04/07 无线电