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 相关文章推荐
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
详解vue组件中使用路由方法
Feb 12 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
在react中使用vue的状态管理的方法示例
May 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
Cakephp 执行主要流程
2010/03/24 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
理解javascript回调函数
2014/12/28 Javascript
javascript 闭包详解
2015/07/02 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
Python 列表反转显示的四种方法
2020/11/16 Python
python实现经纬度采样的示例代码
2020/12/10 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
电信专业应届生自荐信
2013/09/28 职场文书
环保建议书作文
2014/03/12 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
二年级学生期末评语
2014/12/26 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
世界十大狙击步枪排行榜
2022/03/20 杂记