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 相关文章推荐
javascript window对象属性整理
Oct 24 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
js定时器+简单的动画效果实例
Nov 10 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
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
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
python 提取文件的小程序
2009/07/29 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
django页面跳转问题及注意事项
2019/07/18 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
小学英语教学反思案例
2014/02/04 职场文书
元旦联欢会主持词
2014/03/26 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
工商管理专业自荐信
2014/06/03 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
2015年党总支工作总结
2015/05/25 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
python区块链实现简版工作量证明
2022/05/25 Python
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技