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

인기 기사
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD

인기 기사
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7301
9


자바 튜토리얼
1622
14


Cakephp 튜토리얼
1342
46


라라벨 튜토리얼
1259
25


PHP 튜토리얼
1206
29



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

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

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

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

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