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 相关文章推荐
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
JavaScript中如何调用Java方法
Sep 16 Javascript
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 session机制
2011/07/17 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
javascript 闭包详解
2015/07/02 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
Python中优化NumPy包使用性能的教程
2015/04/23 Python
python程序封装为win32服务的方法
2021/03/07 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
副厂长岗位职责
2014/02/02 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
2014年人事部工作总结
2014/12/03 职场文书
捐助倡议书
2015/01/19 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
导游带团欢迎词
2015/09/30 职场文书
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技