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 相关文章推荐
JS表的模拟方法
Feb 05 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
简单了解JavaScript异步
May 23 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
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下目前为目最全的CURL中文说明
2010/08/01 PHP
php自定义apk安装包实例
2014/10/20 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
JS 常用校验函数
2009/03/26 Javascript
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
Django验证码的生成与使用示例
2017/05/20 Python
基于python中__add__函数的用法
2019/11/25 Python
python Shapely使用指南详解
2020/02/18 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
优秀中学生事迹材料
2014/01/31 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
工作简报格式范文
2015/07/21 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
解决xampp安装后Apache无法启动
2022/03/21 Servers