js实现仿qq消息的弹出窗效果


Posted in Javascript onJanuary 06, 2016

在我们的日常开发中,或者生活中,经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗,分享给大家供大家参考,具体内容如下
运行效果截图:

js实现仿qq消息的弹出窗效果

直接贴代码:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
<title>javaScript实现网页右下角弹出窗口代码</title> 
</head> 
<body> 
<script type="text/javascript"> 
var ShowMsg={ 
  title:'提示', 
  content:'模拟qq弹出框消息提醒', 
  width:'300px', 
  height:'100px', 
  setTitle:function(value){ 
    this.title=value; 
  }, 
  setContent:function(value){ 
    this.content=value; 
  }, 
  getTitle:function(){ 
    return this.title; 
  }, 
  getContent:function(){ 
    return this.content; 
  }, 
  show:function(){ 
    //弹窗div 
    var _winPopDiv = document.createElement('div');  
      _winPopDiv.id="_winPopDiv";  
      _winPopDiv.style.cssText = 'width:300px; position:absolute; right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:block;'; 
    //消息标题div 
    var _titleDiv= document.createElement('div');  
      _titleDiv.id="_titleDiv";   
      _titleDiv.innerHTML=this.getTitle();  
      _titleDiv.style.cssText = 'width:100%; height:22px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:left; font-size:14px;';  
      _winPopDiv.appendChild(_titleDiv); 
    //关闭消息按钮span 
    var _closeSpan= document.createElement('span');  
      _closeSpan.id="_closeSpan";  
      _closeSpan.innerHTML="X"; 
      _closeSpan.style.cssText = 'position:absolute; right:4px; top:-1px; color:#FFF; cursor:pointer;font-size:14px;';  
      _titleDiv.appendChild(_closeSpan);  
    //内容div 
    var _conDiv= document.createElement('div');  
      _conDiv.id="_conDiv";  
      _conDiv.style.cssText = 'width:100%; height:110px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center;';  
      _conDiv.innerHTML=this.getContent(); 
      _winPopDiv.appendChild(_conDiv);   
    document.body.appendChild(_winPopDiv);  
    //关闭span绑定事件 
    var closeDiv = document.getElementById("_closeSpan"); 
    if(closeDiv.addEventListener){ 
      closeDiv.addEventListener("click",function(e){  
        if (window.event != undefined) {  
          window.event.cancelBubble = true;  
        } else if (e.stopPropagation) {  
          e.stopPropagation();  
        }  
        document.getElementById('_winPopDiv').style.cssText="display:none;"; 
      },false); 
    }else if(closeDiv.attachEvent){ 
      closeDiv.attachEvent("onclick",function(e){  
        if (window.event != undefined) {  
          window.event.cancelBubble = true;  
        } else if (e.stopPropagation) {  
          e.stopPropagation();  
        }  
        document.getElementById('_winPopDiv').style.cssText="display:none;"; 
      }); 
    } 
  } 
}; 
ShowMsg.show(); 
</script> 
</body> 
</html>

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

Javascript 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
js 图片懒加载的实现
Oct 21 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 #Javascript
详解jQuery Mobile自定义标签
Jan 06 #Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 #Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 #Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 #Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 #Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 #Javascript
You might like
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
jquery延迟对象解析
2016/10/26 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
python去除扩展名的实例讲解
2018/04/23 Python
Python中偏函数用法示例
2018/06/07 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
酒后驾驶检讨书
2014/01/27 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
2015年党小组工作总结
2015/05/26 职场文书
观后感的写法
2015/06/19 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS