zoukankan      html  css  js  c++  java
  • js封装好的模仿qq消息弹窗代码

    在我们的日常开发中,或者生活中。常常须要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗。

    直接贴代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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弹出框消息提醒',
    	'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 = '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 = '100%; height:22px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:left; font-size:14px;';  
    			_winPopDiv.appendChild(_titleDiv);
    		//关闭消息buttonspan
    		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 = '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>
    一下为实例的截图:

    点击下载源码http://download.csdn.net/download/xmt1139057136/7156929

    欢迎大家关注我的个人博客。或者加qq群135430763共同学习。

  • 相关阅读:
    BEM(Block–Element-Modifier)
    http://element.eleme.io/#/zh-CN/component/quickstart
    Commit message 的写法规范。本文介绍Angular 规范(
    好的commit应该长啥样 https://github.com/torvalds/linux/pull/17#issuecomment-5654674
    代码管理
    if you have content fetched asynchronously on pages where SEO is important, SSR might be necessary
    Martin Fowler’s Active Record design pattern.
    The Zen of Python
    Introspection in Python How to spy on your Python objects Guide to Python introspection
    Object-Oriented Metrics: LCOM 内聚性的度量
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/5082237.html
Copyright © 2011-2022 走看看