在我们的日常开发中，或者生活中。常常须要用到弹出窗。这里我们就用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>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);

		//关闭消息buttonspan

		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>

一下为实例的截图：

点击下载源码：http://download.csdn.net/download/xmt1139057136/7156929

欢迎大家关注我的个人博客。或者加qq群135430763共同学习。

js封装好的模仿qq消息弹窗代码的更多相关文章

  1. python实现定时发送qq消息

    因为生活中老是忘记各种事情,刚好又在学python,便突发奇想通过python实现提醒任务的功能(尽管TIM有定时功能),也可定时给好友.群.讨论组发送qq消息.其工作流程是:访问数据库提取最近计划— ...

  2. js高仿QQ消息列表左滑功能

    该组件,主要功能类似于QQ消息列表左滑出现删除.标为已读等按钮的功能:现在的版本用的是纯javaScript编写:后续会跟进 angularJs 开发的类似组件以及jquery的; 下面,就让我们来认 ...

  3. Qt5 托盘模仿qq闪烁，弹消息框实现

    在别人代码基础上做的,课设刚好用上了,贴出来分享Qt5.5.1实现. 图片自己找. #ifndef DIALOG_H #define DIALOG_H #include <QDialog> ...

  4. 虚拟机有QQ消息时宿主机自动弹窗提示

    因为是检测窗口实现的,所以要求设置会话窗口自动弹出,而且看完消息就把QQ消息窗口关掉... 虚拟机端 #! /usr/bin/env python # -*- coding: utf-8 -*- fr ...

  5. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  6. 使用NW.js封装微信公众号菜单编辑器为桌面应用

    开发微信公众号的朋友都会遇到一个常见的需求就是修改自定义菜单,如果每个人都去开发这个不经常使用的功能确实有点浪费时间.前段时间在github上找到一个仿企业号的菜单编辑界面,结合微信的C# SDK开发 ...

  7. 模仿QQ空间 网页设计

    目的:1.通过模仿QQ空间,全自主写代码,熟悉网页设计的流程 2.熟练的掌握HTML.CSS.JS的应用 3.将在此过程中遇到的问题及其解决方法记录在此,以便取用. 开始: 一.登陆界面(index. ...

  8. Sagit.Framework For IOS 开发框架入门教程5：消息弹窗STMsgBox

    前言: 昨天刚写了一篇IT连创业的文章:IT连创业系列:产品设计之答题模块,(欢迎大伙关注!) 感觉好久没写IOS的文章了,今天趁机,来补一篇,Sagit的教程. Sagit 开源地址:https:/ ...

  9. ios swift模仿qq登陆界面，xml布局

    给大家推荐两个学习的地址: 极客学院的视频:http://www.jikexueyuan.com/path/ios/ 一个博客:http://blog.csdn.net/lizhongfu2013/a ...

随机推荐

  1. 重操JS旧业第二弹：数据类型与类型转换

    一 数据类型 1 js中的数据类型 1.1 数据类型列举 1)number类型 2)boolean类型 3)string类型 4)对象类型 5)函数类型 6)undefined类型 1.2 数据类型获 ...

  2. GreenDAO数据库版本升级

    GreenDAO是一款非要流行的android平台上的数据库框架,性能优秀,代码简洁. 初始化数据库模型代码的时候需要使用java项目生成代码,依赖的jar包已经上传到我的资源里了,下载地址如下:ht ...

  3. EF连接MySQL数据Web.Config配置

    EF连接MySQL数据Web.Config配置 <?xml version="1.0" encoding="utf-8"?> <configu ...

  4. win2k/xp查看当前进程

    win2k/xp查看当前进程 tasklist tasklist | find "关键字" 可以对结果进行过滤 关闭当前某个进程 taskkill /pid 程序的PID号码 wi ...

  5. 【AllJoyn专题】基于AllJoyn和Yeelink的传感器数据上传与指令下行的研究

    接触高通物联网框架AllJoyn不太久,但确是被深深地吸引了.在我看来,促进我深入学习的原因有三点:一.AllJoyn开源,对开源的软硬件总会有种莫名的喜爱,虽然或许不会都深入下去:二.顺应潮流,物联 ...

  6. C++学习之路—多态性与虚函数（二）纯虚函数与抽象类

    (根据<C++程序设计>(谭浩强)整理,整理者:华科小涛,@http://www.cnblogs.com/hust-ghtao转载请注明) 1    纯虚函数 在前面的博客中已经提到:有时 ...

  7. linux进程解析--进程的创建

    通常我们在代码中调用fork()来创建一个进程或者调用pthread_create()来创建一个线程,创建一个进程需要为其分配内存资源,文件资源,时间片资源等,在这里来描述一下linux进程的创建过程 ...

  8. 基于visual Studio2013解决C语言竞赛题之1093连接链表

        题目 解决代码及点评 #include <stdio.h> #include <stdlib.h> #include <math.h> #i ...

  9. 【Unity 3D】学习笔记三十九：控制组件

    控制组件 角色控制组件和刚体组件都具备物理引擎的功能,须要绑定游戏对象才干实现对应的物理效果,而且同一个游戏对象中两者仅仅能存在一个,不能共存.刚体组件能够很精确的模拟现实世界中的一切物理效果,而角色 ...

  10. hdu 1387 Team Queue （链表）

    题目大意: 不同的人在不同的队伍里,插入链表的时候假设这个链表里有他的队友,就把它放到最后一个队友的最后.假设没有队友,就把它放到整个链表的最后面. 出链表的时候把第一个人拿出来. 思路分析: 要模拟 ...