집 >웹 프론트엔드 >JS 튜토리얼 >js는 qq message_javascript 기술을 모방하는 팝업 창 효과를 실현합니다.

js는 qq message_javascript 기술을 모방하는 팝업 창 효과를 실현합니다.

WBOY원래의: 2016-05-16 15:21:361302검색

우리는 일상생활에서 팝업창을 활용해야 하는 경우가 많습니다. 여기에서는 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_javascript 기술에서 쿠키를 설정하고 얻는 방법 예제에 대한 자세한 설명다음 기사：javascript_javascript 기술에서 쿠키를 설정하고 얻는 방법 예제에 대한 자세한 설명

js는 qq message_javascript 기술을 모방하는 팝업 창 효과를 실현합니다.

관련 기사