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

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

May 16, 2016 pm 03:21 PM
js qq

우리는 일상생활에서 팝업창을 활용해야 하는 경우가 많습니다. 여기에서는 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>
로그인 후 복사

이 글이 자바스크립트 프로그래밍을 배우는 모든 분들에게 도움이 되기를 바랍니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Melania Coins의 원래 가격은 얼마입니까? 멜라니 아로 증가 할 것으로 예상됩니다 Melania Coins의 원래 가격은 얼마입니까? 멜라니 아로 증가 할 것으로 예상됩니다 Feb 15, 2025 pm 05:06 PM

Melania Coins의 원래 가격은 얼마입니까? 멜라니 아로 증가 할 것으로 예상됩니다

어떤 소프트웨어가 비트 코인을 만들 수 있습니까? 2025 년 상위 10 개 비트 코인 거래 소프트웨어 권장 사항 어떤 소프트웨어가 비트 코인을 만들 수 있습니까? 2025 년 상위 10 개 비트 코인 거래 소프트웨어 권장 사항 Feb 21, 2025 pm 09:30 PM

어떤 소프트웨어가 비트 코인을 만들 수 있습니까? 2025 년 상위 10 개 비트 코인 거래 소프트웨어 권장 사항

Gateio Exchange App Old 버전 Gateio Exchange App Old 버전 다운로드 채널 Gateio Exchange App Old 버전 Gateio Exchange App Old 버전 다운로드 채널 Mar 04, 2025 pm 11:36 PM

Gateio Exchange App Old 버전 Gateio Exchange App Old 버전 다운로드 채널

2025 통화 서클에 대한 필수 소프트웨어 요약 2025 통화 서클에 대한 필수 소프트웨어 요약 Feb 21, 2025 pm 09:42 PM

2025 통화 서클에 대한 필수 소프트웨어 요약

최고의 시장보기 소프트웨어는 무엇입니까? 최고의 시장보기 소프트웨어는 무엇입니까? Feb 21, 2025 pm 09:48 PM

최고의 시장보기 소프트웨어는 무엇입니까?

OUYI 공식 로그인 입구 2025 OUYI OKX 거래 플랫폼 공식 버전 입구 OUYI 공식 로그인 입구 2025 OUYI OKX 거래 플랫폼 공식 버전 입구 Feb 15, 2025 pm 07:15 PM

OUYI 공식 로그인 입구 2025 OUYI OKX 거래 플랫폼 공식 버전 입구

2018-2024 USD의 Bitcoin의 최신 가격 2018-2024 USD의 Bitcoin의 최신 가격 Feb 15, 2025 pm 07:12 PM

2018-2024 USD의 Bitcoin의 최신 가격

상위 10 개 통화 거래 앱 플랫폼은 상위 10 개 통화 거래소의 최신 순위를 나열합니다. 상위 10 개 통화 거래 앱 플랫폼은 상위 10 개 통화 거래소의 최신 순위를 나열합니다. Feb 21, 2025 pm 09:33 PM

상위 10 개 통화 거래 앱 플랫폼은 상위 10 개 통화 거래소의 최신 순위를 나열합니다.

See all articles