js 웹페이지_javascript 기술의 오른쪽 하단에 있는 프롬프트 상자의 예

본 글의 예시에서는 js 웹페이지 오른쪽 하단에 있는 프롬프트 상자의 구현 방법을 설명하고 있으며 참고용으로 모든 사람과 공유합니다. 구체적인 방법은 다음과 같습니다.

html 코드 부분은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. .messageTip{국경-오른쪽: #455690 1px 고체; 경계-왼쪽: #a6b4cf 1px 고체; #455690 1px 고체; : 0px; 숨김; 너비: 230px; 배경:#cfdef4; .messageTip .close{위치:절대; 오른쪽:0px; 글꼴-가중치:굵게:4px 4px 0 0;} .messageTip .close a{color:red;font-size:12px 텍스트-장식:none;} .messageTip .content{테두리-상단: #ffffff 1px 실선; 테두리-왼쪽: #ffffff 1px 실선} .messageTip .content .title{color: #1f336b; padding-top: 4px;padding-left: 4px; 높이:22px;} .messageTip .content .msg{border-right: #b9c9ef 1px solid;border-left: #728eb8 1px solid; border-top: #728eb8 1px solid; 여백:1px} × 시스템 프롬프트: 내용 >

js 코드 부분은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. 함수 messageTip(pJso) { _.init(this, pJso, { 이름: 'msg'//프롬프트 상자 라벨 ID }); This.eMsg = document.getElementById(this.name); } messageTip.prototype = { //프롬프트 상자는 항상 오른쪽 하단에 있습니다 위치 변경: function(_this) { var divHeight =parseInt(_this.eMsg.offsetHeight, 10); var divWidth =parseInt(_this.eMsg.offsetWidth, 10); var docWidth = document.body.clientWidth; var docHeight = document.body.clientHeight; _this.eMsg.style.top = docHeight - divHeight parseInt(document.body.scrollTop, 10); _this.eMsg.style.left = docWidth - divWidth parseInt(document.body.scrollLeft, 10); },

//프롬프트 상자가 천천히 올라옵니다 MoveDiv: 함수(_this) { /* 여기에서 몇 초 후에 자동으로 닫히도록 설정할 수 있습니다 ... */ 시도해 보세요 { If (parseInt(_this.eMsg.style.top, 10) window.clearInterval(_this.objTimer); _this.objTimer = window.setInterval(function() { _this.rePosition(_this); }, 1); } _this.divTop =parseInt(_this.eMsg.style.top, 10); _this.eMsg.style.top = _this.divTop - 1; } (e) 잡기 { } }, //프롬프트 상자 닫기 닫기: function() { This.eMsg.style.visibility = '숨김'; If (this.objTimer) window.clearInterval(this.objTimer); },

//프롬프트 상자 표시 표시: 함수() { var divTop =parseInt(this.eMsg.style.top, 10); This.divTop = divTop; var divLeft =parseInt(this.eMsg.style.left, 10);

var divHeight =parseInt(this.eMsg.offsetHeight, 10); This.divHeight = divHeight;

var divWidth = parsInt(this.eMsg.offsetWidth, 10); var docWidth = document.body.clientWidth; var docHeight = document.body.clientHeight; This.docHeight = docHeight;

this.eMsg.style.top = parsInt(document.body.scrollTop, 10) docHeight 10; This.eMsg.style.left = parsInt(document.body.scrollLeft, 10) docWidth - divWidth; This.eMsg.style.visibility = "표시됨";

var _this = this; This.objTimer = window.setInterval(function() { _this.moveDiv(_this); }, 10); } }

var msgTip = new messageTip({ name: 'eMeng' }); window.onload = function() { msgTip.show() }; window.onresize = function() { msgTip.rePosition(msgTip) };

이 글이 모든 분들의 웹 프로그래밍 디자인에 도움이 되기를 바랍니다.