专栏首页业余草js封装好的模仿qq消息弹窗代码

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>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>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML5环形音乐播放器

    通过 HTML5,音乐在网络上东山再起。添加音频文件就像插入图像那样简单,并且用户能在浏览器外播放音乐,从而实现惊人的音乐体...

    业余草
  • input中加入图片的做法

    有很多高大上的网站中都有这一做法。尤其是在登录页面,输入用户名和密码时加入小图标,看起来简单舒服。

    业余草
  • 分享一款jQuery全屏滚动页面特性案例

    分享一款jQuery全屏滚动页面特性案例。 我们在来往官网,或者小米官网都会看到全屏滚动页面的一些例子。可以说全屏滚动页面...

    业余草
  • illumina 官方提供的甲基化芯片分析软件 GenomeStudio - 安装篇

    GenomeStudio 是 illumina 公司开发的分析 illumina 芯片数据的软件, 该软件最新版为v2, 是收费的。其v1 版本部分功能可以免费...

    生信修炼手册
  • CSS3文本

    小胖
  • 你不需要 jQuery,但你需要一个 DOM 库

    写这篇文章的目的,一方面是介绍一下自己编写的模块化 DOM 库 domq.js,另一方面是希望大家对 jQuery 有一个正确的认识,即使 jQuery 已经逐...

    叙帝利
  • 『腾讯云开发达人计划』开始啦~

    腾讯【云开发达人】计划,是面向大学生的移动开发技术实战项目。计划包括校园技术工坊、线下百人公开课和竞技赛三大部分,围绕小程序开发、H5开发等展开。通过活动,大家...

    腾讯云开发TCB
  • 放心吧,这些坑我们都帮你踩过了

    年底了,总结起小助手的这一年,除了偶尔焦虑“日渐消瘦的钱包和直线上涨的体重”,一切还算顺遂。这一年,虽然钱没赚多少,但故事却听了不少,与坏人斗智斗勇的经验值也是...

    用户6966869
  • form表单提交涉及到slider(jRange)

    最近做商城的时候,需要做选择价格区间的这么一个功能,为了让选择更加直观,更加灵活;在网上搜索到了一款不错的插件,一款jQuery插件jRange:

    麦克劳林
  • 北森云宣布完成E轮融资,总金额超1亿美金

    本轮三家机构均为北森老股东:元生资本和经纬中国领投,红杉资本跟投。本轮融资后北森将继续加大在HR技术领域的投入,包括AI和大数据、PaaS平台以及北森术业专攻的...

    数据猿

扫码关注云+社区

领取腾讯云代金券