js实现仿qq消息的弹出窗效果
2016-01-06 00:00
866 查看
在我们的日常开发中,或者生活中,经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗,分享给大家供大家参考,具体内容如下
运行效果截图:
直接贴代码:
希望本文所述对大家学习javascript程序设计有所帮助。
javascript之弹出窗口居中的代码
javascript用DIV模拟弹出窗口_窗体滚动跟随
js实现右下角窗口弹出窗口效果
js右下角弹出窗口,点击可关闭效果
javascript 强制弹出窗口代码-跨拦截
js 强制弹出窗口代码研究-又一款代码
23个Javascript弹出窗口特效整理
关于js中alert弹出窗口文本换行问题简单详细说明
JS弹出窗口代码大全(详细整理)
运行效果截图:
直接贴代码:
<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程序设计有所帮助。
您可能感兴趣的文章:
javascript 控制弹出窗口javascript之弹出窗口居中的代码
javascript用DIV模拟弹出窗口_窗体滚动跟随
js实现右下角窗口弹出窗口效果
js右下角弹出窗口,点击可关闭效果
javascript 强制弹出窗口代码-跨拦截
js 强制弹出窗口代码研究-又一款代码
23个Javascript弹出窗口特效整理
关于js中alert弹出窗口文本换行问题简单详细说明
JS弹出窗口代码大全(详细整理)
相关文章推荐
- JavaScript iframe数据共享接口实现方法
- JavaScript中iframe实现局部刷新的几种方法汇总
- JavaScript引用类型和基本类型详解
- javascript中加var和不加var的区别 你真的懂吗
- JavaScript实现点击按钮直接打印
- 谈谈JavaScript类型系统之Math
- JavaScript动态创建div等元素实例讲解
- 直接拿来用的页面跳转进度条JS实现
- servlet post 发送,接收json
- js SyntaxError: JSON.parse: bad control character
- jscs规则
- 如何培养自己写的JavaScript的思维
- JavaScript高级程序设计第三版笔记(六)
- js原生拖拽
- 自己实现一个js框架(一)
- JavaScript知识总结(一)
- JavaScript浓缩咖啡(二)
- 番茄时间js版
- JavaScript高级程序设计第三版笔记(一)
- js中那些具有二义性的符号