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共同学习。

  • 相关阅读:
    sys:1: RuntimeWarning: coroutine 'Launcher.killChrome' was never awaited
    python 引用对象相等,还是用list.extend()
    python 3.7.4 垃圾,一整天安装那个mitmproxy ,不行,卡在一个破库叫urwid ,说是os.path()为空,换3.8.2安装成功,垃圾3.7.4迟早要完
    python @staticmethod 注解,静态方法,可以省略类里那个self参数
    spring boot 记一次花了两天还是没有解决的奇怪bug(失去所有响应,post不到了,啥反应也没有了)
    Yum常用命令
    Centos安装与配置
    遍历hashmap的6种方法
    Java定时调度
    ElasticSearch的应用
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/5082237.html
Copyright © 2011-2022 走看看