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将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
js constructor的实际作用分析
Nov 15 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
原生js编写焦点图效果
Dec 08 Javascript
vue之将echart封装为组件
Jun 02 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
js实现飞机大战游戏
Aug 26 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概述.
2006/10/09 PHP
php array_merge下进行数组合并的代码
2008/07/22 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
PHP7常量数组用法分析
2016/09/26 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
PHP中“=&gt;
2019/03/01 PHP
PHP函数积累总结
2019/03/19 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
python发腾讯微博代码分享
2014/01/10 Python
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
大数据分析用java还是Python
2020/07/06 Python
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
普通院校学生的自荐信
2013/11/27 职场文书
班级旅游计划书
2014/05/03 职场文书
三人合伙协议书范本
2014/10/29 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏