js实现仿qq消息的弹出窗效果_javascript技巧
在我们的日常开发中，或者生活中，经常需要用到弹出窗。这里我们就用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程序设计有所帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
melania币原始价格多少？melania币预计会涨到多少美金
Feb 15, 2025 pm 05:06 PM
Melanie币的原始价格为0.002美元，其预期涨幅存在争议。分析师预测价格可能上涨至0.1美元或暴跌至零。影响其价格的因素包括社区支持、团队执行、市场状况和实际应用。投资者需要注意加密货币市场的波动性，投资Melanie币存在失去所有投资、财务波动和监管风险的可能性。
什么软件可以弄比特币？2025比特币交易软件前十名推荐
Feb 21, 2025 pm 09:30 PM
随着比特币市场的快速发展，选择可靠的交易软件至关重要。本文将为您推荐 2025 年排名前十的比特币交易软件，帮助您高效、安全地进行交易。这些软件经过严格的筛选，考虑了功能、安全性、用户友好性和支持水平等因素。从初学者友好的平台到面向经验丰富交易者的复杂工具，您将在此列表中找到满足您交易需求的最佳选择。
gateio交易所app老版本 gateio交易所app老版本下载渠道
Mar 04, 2025 pm 11:36 PM
Gateio 交易所 app 老版本下载渠道，涵盖官方、第三方应用市场、论坛社区等途径，还给出下载注意事项，帮你轻松获取老版本，解决新版本使用不适或设备兼容问题。
2025币圈必备软件汇总
Feb 21, 2025 pm 09:42 PM
本指南概述了币圈必备的软件工具，可帮助用户更有效地管理和交易加密资产。这些软件涵盖了从交易平台到分析工具和安全解决方案的广泛类别。该指南旨在帮助用户为即将到来的 2025年加密市场做好准备。
看盘软件哪个好 虚拟货币交易所看盘软件前十名
Feb 21, 2025 pm 09:48 PM
对于从事虚拟货币交易的人士而言，选择一款优秀的看盘软件至关重要。本文旨在向读者介绍十款最受好评的虚拟货币交易所看盘软件，帮助他们做出明智的选择。这些软件提供多种功能，包括实时报价、技术分析工具、图表和自定义警报，以满足不同交易者的需求。无论您是经验丰富的专业人士还是刚入门的初学者，本文都会为您提供宝贵的见解，帮助您找到最适合您交易风格的看盘软件。
欧意官方登录入口 2025欧易okx交易平台官方版入口
Feb 15, 2025 pm 07:15 PM
全面了解欧易 OKX 交易平台的官方入口 实时监控欧易 OKX 交易平台的使用情况 深入探讨欧易 OKX 交易平台的安全性保障和发展规划
2018-2024年比特币最新价格美元大全
Feb 15, 2025 pm 07:12 PM
实时比特币美元价格 影响比特币价格的因素 预测比特币未来价格的指标 以下是 2018-2024 年比特币价格的一些关键信息：
炒币十大交易app平台榜单 十大币圈交易所大全最新排名
Feb 21, 2025 pm 09:33 PM
数字资产交易领域涌现出众多综合实力强的交易所平台。其中，OKX、币安和火币凭借着雄厚的技术实力、完善的安全保障和丰富的产品线，跻身行业标杆。OKX成立于2013年，拥有强大的技术团队，研发的高性能交易引擎和安全系统保障了用户的交易体验。币安则以全球最大的交易量闻名，其多元化的产品生态和领先的技术优势，引领着行业创新。火币深耕行业多年，拥有良好的用户口碑和品牌影响力，其全球化布局和合规运营，为用户提供可靠的交易环境。
