JS封装的模仿即时通信软件右下角消息弹窗功能示例

本文实例讲述了射流研究…封装的模仿即时通信软件右下角消息弹窗功能。分享给大家供大家参考，具体如下：

在我们的日常开发中，或者生活中，经常需要用到弹出窗。这里我们就用射流研究…模拟一下即时通信软件消息一样的弹出窗。

直接贴代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=gbk '/title www .JB 51。net JAVAScript实现网页右下角弹出窗口代码/title/head dyscript type=' text/JavaScript ' var ShowMsg={ title : '提示，content: '模拟即时通信软件弹出框消息提醒，宽度：'300px '，高度：'100px '，设置：函数(值){ this。title=值；}，setcontent :函数(值){ this。内容=价值；}，gettitle : function(){返回这个。标题；}，getcontent : function(){ 0返回this.content}，show:function(){ //弹窗div var _ winPopDiv=文档。创建元素(' div ')；_ WinPopDiv。id=" _ WinPopDiv_ WinPopDiv。风格。CSS文本=' width :300 px位置：绝对；右：0底部：0;border:1px固体# 666;边距margin:0padding:1px飞越：隐藏；显示：块；//消息标题div var _ title div=文档。创建元素(' div ')；_ TitleDiV . id=' _ TitleDiV _ TitleDiV。innerhtml=this。gettitle()；_标题区。风格。CSS text=' width :100%；高度：22px线高：20 px背景# FFCC00font-weight :粗体；向左文本对齐：font-size :14 px；_ winpopdiv。append child(_ title div)；//关闭消息按钮span var _ closeSpan=文档。创建元素(“span”)；_ close span . id=' _ close span _ close span . innerhtml=' X _ close span。风格。cstext='位置：绝对；right :4 xtop :-1px；颜色： # FFF；光标：指针指针；font-size :14 px；_标题区。append child(_ closeSpan)；//内容div var _ conDiv=文档。创建元素(' div ')；_ conDiv.id=' _ conDiv_ ConDiv。风格。CSS text=' width :100%；高度：110px线高：80 px字体粗细：加粗；font-size :12 px颜色： # FF0000文本修饰：下划线；文本对齐：居中；_ condiv。innerhtml=this。getcontent()；_ winpopdiv。append child(_ ConDiv)；文件。尸体。append child(_ WinPopDiv)；//关闭跨度绑定事件var closeDiv=文档。getelementbyid(' _ closeSpan ')；if(closediv。addeventlistener){ closediv。addeventlistener(' click ')，函数(e){ if (window.event！=未定义){ window。事件。cancelubble=true} else if(e . stopperpagation){ e . stopperpagation()；}文档。getelementbyid(' _ WinPopDiv ')。风格。CSS文本=' display : none；}，false)；} else if(closediv。attachevent){ closediv。attachevent(' onclick '，函数(e){ if (window.event！=未定义){ window。事件。cancelubble=true} else if(e . stopperpagation){ e . stopperpagation()；}文档。getelementbyid(' _ WinPopDiv ')。风格。CSS文本=' display : none；});} }};showmsg。show()；/脚本/正文/html这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试可得到如下运行效果：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript窗口操作与技巧汇总》 、 《JavaScript事件相关操作与技巧大全》 、 《JavaScript页面元素操作技巧总结》 、 《JavaScript操作DOM技巧总结》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。