JS 웹 페이지의 오른쪽 하단에있는 프롬프트 상자의 예

이 기사에서는 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); };

이 기사가 모든 사람의 웹 프로그래밍에 도움이되기를 바랍니다.