js는 qq message_javascript 기술을 모방하는 팝업 창 효과를 실현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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으로 문의하세요.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7613

Cakephp 튜토리얼

1387

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

136

Related knowledge

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

비트 코인 시장의 빠른 발전으로 신뢰할 수있는 거래 소프트웨어를 선택하는 것이 중요합니다. 이 기사는 효율적이고 안전하게 거래 할 수 있도록 2025 년 Top Ten Bitcoin Trading 소프트웨어를 권장합니다. 이 소프트웨어는 엄격하게 스크리닝되었으며 기능, 보안, 사용자 친화 성 및 지원 수준과 같은 요소를 고려합니다. 초보자 친화적 인 플랫폼에서 경험이 풍부한 거래자를위한 복잡한 도구에 이르기 까지이 목록에서 거래 요구에 가장 적합한 옵션을 찾을 수 있습니다.

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

Gateio Exchange 앱은 공식, 제 3 자 애플리케이션 시장, 포럼 커뮤니티 및 기타 채널을 다루는 기존 버전의 채널을 다운로드합니다. 또한 기존 버전을 쉽게 얻고 새로운 버전 또는 장치 호환성을 사용하여 불편 함 문제를 해결하는 데 도움이됩니다.

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

이 안내서는 통화 서클의 필수 소프트웨어 도구에 대한 개요를 제공하여 사용자가 암호화 자산을보다 효율적으로 관리하고 거래 할 수 있도록 도와줍니다. 이 소프트웨어는 거래 플랫폼에서 분석 도구 및 보안 솔루션에 이르기까지 다양한 범주를 다룹니다. 이 안내서는 사용자가 2025 년에 다가오는 암호 시장을 준비 할 수 있도록 설계되었습니다.

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

실시간 비트 코인 USD 가격 비트 코인 가격에 영향을 미치는 요인 향후 비트 코인 가격을 예측하기위한 지표 다음은 2018-2024 년 비트 코인 가격에 대한 몇 가지 주요 정보입니다.

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

가상 통화 거래에 종사하는 사람들에게는 훌륭한 시장 시청 소프트웨어를 선택하는 것이 중요합니다. 이 기사는 독자들에게 가장 유명한 10 가지 가상 환전 교환 시청 소프트웨어를 소개하여 정보에 입각 한 선택을 할 수 있도록하는 것을 목표로합니다. 이 소프트웨어는 실시간 인용문, 기술 분석 도구, 차트 및 사용자 정의 경고를 포함하여 다양한 트레이더의 요구를 충족시키는 다양한 기능을 제공합니다. 숙련 된 전문가이든 초보자이든,이 기사는 거래 스타일에 가장 적합한 시청 소프트웨어를 찾는 데 도움이되는 귀중한 통찰력을 제공합니다.

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

포괄적 인 강도를 가진 많은 교환 플랫폼이 디지털 자산 거래 분야에서 등장했습니다. 그중에서도 OKX, Binance 및 Huobi는 강력한 기술 강점, 완전한 보안 보증 및 풍부한 제품 라인을 통해 업계 벤치 마크가되었습니다. 2013 년에 설립 된 OKX는 강력한 기술 팀을 보유하고 있으며 개발 된 고성능 거래 엔진 및 보안 시스템은 사용자의 거래 경험을 보장합니다. Binance는 세계에서 가장 큰 거래량으로 유명합니다. Huobi는 수년 동안 업계에 깊이 관여 해 왔으며 글로벌 레이아웃과 준수하는 운영은 신뢰할 수있는 거래 환경을 제공합니다.

H5 및 미니 프로그램을 홍보하는 다른 방법은 무엇입니까? Apr 06, 2025 am 11:03 AM

H5 및 Mini 프로그램의 홍보 방법에는 차이가 있습니다. 플랫폼 의존성 : H5는 브라우저에 의존하고 미니 프로그램은 특정 플랫폼 (예 : WeChat)에 의존합니다. 사용자 경험 : H5 경험이 좋지 않으며 MINI 프로그램은 기본 응용 프로그램과 유사한 원활한 경험을 제공합니다. 커뮤니케이션 방법 : H5는 링크를 통해 퍼지고 미니 프로그램은 플랫폼을 통해 공유하거나 검색됩니다. H5 프로모션 방법 : 소셜 공유, 이메일 마케팅, QR 코드, SEO, 유료 광고. 미니 프로그램 프로모션 방법 : 플랫폼 프로모션, 소셜 공유, 오프라인 프로모션, ASO, 다른 플랫폼과의 협력.