이 기사에서는 JS 웹 페이지의 오른쪽 하단에있는 프롬프트 상자의 구현 방법을 설명하며 참조를 위해 귀하와 공유됩니다. 특정 방법은 다음과 같습니다.
HTML 코드 부분은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <style type = "text/css">
.messagetip {Border-Right : #455690 1px solid; 테두리 탑 : #A6B4CF 1px 고체; 왼쪽 경계 : #a6b4cf 1px 고체; 국경-바닥 : #455690 1px 고체; Z- 인덱스 : 99999; 왼쪽 : 0px; 상단 : 0px; 가시성 : 숨겨진; 너비 : 230px; 위치 : 절대; 배경 :#cfdef4; 텍스트 정렬 : 왼쪽}
.messagetip .Close {위치 : 절대; 오른쪽 : 0px; 글꼴 중량 : 대담한; 패딩 : 4px 4px 0 0;}
.messagetip .Close a {색상 : 빨간색; font-size : 12px; 텍스트 결정 : 없음;}
.messagetip .Content {Border-Top : #ffffff 1px solid; 왼쪽 경계 : #ffffff 1px solid}
.messagetip .Content .Title {색상 : #1F336B; 패딩 탑 : 4px; 왼쪽 패딩 : 4px; 높이 : 22px;}
.MessAgetip .Content .msg {Border-Right : #B9C9EF 1PX SOLID; BORTHER-LEFT : #728EB8 1PX SOLID; 테두리 : #728EB8 1px 고체; 패딩 : 10px; 여백 : 1px}
</스타일>
<script type = "text/javaScript"src = "/js/base.js"> </script>
<div id = "emeng">
<div> <a href = "javaScript : msgtip.close ();"> × </a> </div>
<div>
<div> 시스템 프롬프트 : </div>
<div>
콘텐츠
</div>
</div>
</div>
JS 코드 부분은 다음과 같습니다.
다음과 같이 코드를 복사합니다. function messagetip (pjso) {
_.init (this, pjso, {
이름 : 'msg'// 프롬프트 박스 태그 ID
});
this.emsg = document.getElementById (this.name);
}
Messagetip.prototype =
{
// 프롬프트 상자는 항상 오른쪽 하단에 있습니다.
재배치 : 함수 (_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 = divheight + parseint (document.body.scrolltop, 10);
_this.emsg.style.left = docwidth -divwidth + parseint (document.body.scrollleft, 10);
},
// 프롬프트 상자가 천천히 상승합니다
miziv : function (_this) {
/*
여기에서 몇 초 후에 꺼지도록 설정할 수 있습니다.
...
*/
노력하다 {
if (parseint (_this.emsg.style.top, 10) <= (_this.docheight- _this.divheight + parseint (document.body.scrolltop, 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);
},
// 프롬프트 상자를 표시합니다
쇼 : function () {
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 = parseint (this.emsg.offsetwidth, 10);
var docwidth = document.body.clientWidth;
var docheight = document.body.clientHeight;
this.docheight = docheight;
this.emsg.style.top = parseint (document.body.scrolltop, 10) + docheight + 10;
this.emsg.style.left = parseint (document.body.scrollleft, 10) + docwidth -divwidth;
this.emsg.style.visibility = "Visible";
var _this = this;
this.objtimer = wind
}
}
var msgtip = new Messagetip ({이름 : 'emeng'});
Window.onload = function () {msgtip.show (); };
Window.onResize = function () {msgtip.reposition (msgtip); };
이 기사가 모든 사람의 웹 프로그래밍에 도움이되기를 바랍니다.