js实现仿qq消息的弹出窗效果

前端技术 2023/09/09 JavaScript

在我们的日常开发中，或者生活中，经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗，分享给大家供大家参考，具体内容如下
运行效果截图：

直接贴代码：

<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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/25884

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案