JS实现简单的右下角弹出提示窗口完整实例


Posted in Javascript onJune 21, 2016

本文实例讲述了JS实现简单的右下角弹出提示窗口效果。分享给大家供大家参考,具体如下:

<!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=utf-8" />
  <title>aa</title>
  <style type="text/css">
   * {
    margin: 0px;
    padding: 0px;
   }
   html, body {
    height: 100%;
   }
   body {
    font-size: 14px;
    line-height: 24px;
   }
   #tip {
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 0px;
    width: 180px;
    border: 1px solid #CCCCCC;
    background-color: #eeeeee;
    padding: 1px;
    overflow: hidden;
    display: none;
    font-size: 12px;
    z-index: 10;
   }
   #tip p {
    padding: 6px;
   }
   #tip h1 {
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    background-color: #0066CC;
    color: #FFFFFF;
    padding: 0px 3px 0px 3px;
    filter: Alpha(Opacity = 100);
   }
   #tip h1 a, #detail h1 a {
    float: right;
    text-decoration: none;
    color: #FFFFFF;
   }
  </style>
  <script type="text/javascript">
   window.onload = function(){
    var divTip = document.createElement("div");
    divTip.id = "tip";
    divTip.innerHTML = "<h1><a href='javascript:void(0)' onclick='start()'>关闭</a>title</h1><p><a href='javascript:void(0)' onclick='showwin()'>content</a></p>";
    divTip.style.height = '0px';
    divTip.style.bottom = '0px';
    divTip.style.position = 'fixed';
    document.body.appendChild(divTip);
   }
   var handle;
   function start(count){
    var obj = document.getElementById("tip");
    if (parseInt(obj.style.height) == 0) {
     obj.style.display = "block";
     handle = setInterval("changeH('up')", 20);
    }
    else {
     handle = setInterval("changeH('down')", 20)
    }
   }
   function changeH(str){
    var obj = document.all ? document.all["tip"] : document.getElementById("tip"); //docuemnt.all ??????
    if (str == "up") {
     if (parseInt(obj.style.height) > 100) 
      clearInterval(handle);
     else 
      obj.style.height = (parseInt(obj.style.height) + 8).toString() + "px";
    }
    if (str == "down") {
     if (parseInt(obj.style.height) < 8) {
      clearInterval(handle);
      obj.style.display = "none";
     }
     else 
      obj.style.height = (parseInt(obj.style.height) - 8).toString() + "px";
    }
   }
   function showwin(){
    //document.getElementsByTagName("html")[0].style.overflow = "hidden";
    start();
   }
  </script>
 </head>
 <body>
  <a href="#" onclick="start()">click</a>
 </body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
jQuery获取元素父节点的方法
Jun 21 #Javascript
JS图片定时翻滚效果实现方法
Jun 21 #Javascript
Javascript删除指定元素节点的方法
Jun 21 #Javascript
jQuery插件扩展测试实例
Jun 21 #Javascript
早该知道的7个JavaScript技巧
Jun 21 #Javascript
BootStrap实现树形目录组件代码详解
Jun 21 #Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 #Javascript
You might like
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
JavaScript 乱码问题
2009/08/06 Javascript
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
python技能之数据导出excel的实例代码
2017/08/11 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
医院信息公开实施方案
2014/05/09 职场文书
服务行业口号
2014/06/11 职场文书
会计专业求职信
2014/08/10 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
单位推荐信范文
2015/03/27 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
golang 实现菜单树的生成方式
2021/04/28 Golang
SQL Server 中的事务介绍
2022/05/20 SQL Server