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面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
前端微信支付js代码
Jul 25 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
Vue组件中slot的用法
Jan 30 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
七款最流行的PHP本地服务器分享
2013/02/19 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
python 中文乱码问题深入分析
2011/03/13 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
如何用Django处理gzip数据流
2021/01/29 Python
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
岗位安全生产责任书
2014/07/28 职场文书
党员年终个人总结
2015/02/14 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
信用卡工资证明范本
2015/06/19 职场文书
发票退票证明
2015/06/24 职场文书