这篇文章主要介绍了 js 实现仿 qq 消息的弹出窗效果,文章代码实现模拟 qq 弹出框消息提醒,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
直接贴代码:
- <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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0624/267714.html