JS封装的模仿qq右下角消息弹窗功能示例


Posted in Javascript onAugust 22, 2018

本文实例讲述了JS封装的模仿qq右下角消息弹窗功能。分享给大家供大家参考,具体如下:

在我们的日常开发中,或者生活中,经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗。

直接贴代码:

<!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=gbk" />
<title>3water.com 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>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试可得到如下运行效果:

JS封装的模仿qq右下角消息弹窗功能示例

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

Javascript 相关文章推荐
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
原生js实现自定义滚动条
Jan 20 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 #Javascript
element-ui 设置菜单栏展开的方法
Aug 22 #Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 #Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 #Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 #Javascript
解决element UI 自定义传参的问题
Aug 22 #Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 #Javascript
You might like
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
JS的参数传递示例介绍
2014/02/08 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
vue观察模式浅析
2018/09/25 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
Python 流程控制实例代码
2009/09/25 Python
Python学习笔记(二)基础语法
2014/06/06 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
python Django 创建应用过程图示详解
2019/07/29 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
python实现控制台输出彩色字体
2020/04/05 Python
Python timeit模块原理及使用方法
2020/10/10 Python
如何基于Python按行合并两个txt
2020/11/03 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
毕业证委托书范文
2014/09/26 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
撤诉申请怎么写
2015/05/19 职场文书
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
Pandas 数据编码的十种方法
2022/04/20 Python
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL