JS封装的模仿qq右下角消息弹窗功能示例
2018-10-15 18:06
阅读：685
本文实例讲述了JS封装的模仿qq右下角消息弹窗功能。分享给大家供大家参考，具体如下：
在我们的日常开发中，或者生活中，经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗。
直接贴代码：
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN 实现网页右下角弹出窗口代码</title> </head> <body> <script type=text/javascript> var ShowMsg={ title:提示, content:模拟qq弹出框消息提醒tent=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;; //消息标题erHTML=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代码运行工具：，测试可得到如下运行效果：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript窗口操作与技巧汇总》、《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
上一篇：微信小程序自定义底部弹出框
评论
亲，登录后才可以留言！