본 글의 예시에서는 js 웹페이지 오른쪽 하단에 있는 프롬프트 상자의 구현 방법을 설명하고 있으며 참고용으로 모든 사람과 공유합니다. 구체적인 방법은 다음과 같습니다. html 코드 부분은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. <br> .messageTip{국경-오른쪽: #455690 1px 고체; 경계-왼쪽: #a6b4cf 1px 고체; #455690 1px 고체; : 0px; 숨김; 너비: 230px; 배경:#cfdef4; .messageTip .close{위치:절대; 오른쪽:0px; 글꼴-가중치:굵게:4px 4px 0 0;}<br> .messageTip .close a{color:red;font-size:12px 텍스트-장식:none;}<br> .messageTip .content{테두리-상단: #ffffff 1px 실선; 테두리-왼쪽: #ffffff 1px 실선}<br> .messageTip .content .title{color: #1f336b; padding-top: 4px;padding-left: 4px; 높이:22px;}<br> .messageTip .content .msg{border-right: #b9c9ef 1px solid;border-left: #728eb8 1px solid; border-top: #728eb8 1px solid; 여백:1px}<br> </스타일><br> <script type="text/javascript" src="/js/base.js"></script><p> <div id="eMeng" class="messageTip"><br> <div class="close"><a href="javascript:msgTip.close();" title="닫기">×</a></div><br> <div class="content"><br> <div class="title">시스템 프롬프트: </div><br> <div class="msg"><br> 내용<br> > </div><br> </p> </div> <br><br> js 코드 부분은 다음과 같습니다. <p></p> <p></p> <div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="99503" class="copybut" id="copybut99503" onclick="doCopy('code99503')"><u></u> 코드는 다음과 같습니다.</a><div class="codebody" id="code99503">함수 messageTip(pJso) {<br> _.init(this, pJso, {<br> 이름: 'msg'//프롬프트 상자 라벨 ID<br> });<br> This.eMsg = document.getElementById(this.name);<br> } <p>messageTip.prototype =<br> {<br> //프롬프트 상자는 항상 오른쪽 하단에 있습니다<br> 위치 변경: function(_this) {<br> var divHeight =parseInt(_this.eMsg.offsetHeight, 10);<br> var divWidth =parseInt(_this.eMsg.offsetWidth, 10);<br> var docWidth = document.body.clientWidth;<br> var docHeight = document.body.clientHeight;<br> _this.eMsg.style.top = docHeight - divHeight parseInt(document.body.scrollTop, 10);<br> _this.eMsg.style.left = docWidth - divWidth parseInt(document.body.scrollLeft, 10);<br> },</p> <p> //프롬프트 상자가 천천히 올라옵니다<br> MoveDiv: 함수(_this) {<br> /*<br> 여기에서 몇 초 후에 자동으로 닫히도록 설정할 수 있습니다<br> ...<br> */<br> 시도해 보세요 {<br> If (parseInt(_this.eMsg.style.top, 10) <= (_this.docHeight - _this.divHeight parseInt(document.body.scrollTop, 10))) {<br> window.clearInterval(_this.objTimer);<br> _this.objTimer = window.setInterval(function() { _this.rePosition(_this); }, 1);<br> }<br> _this.divTop =parseInt(_this.eMsg.style.top, 10);<br> _this.eMsg.style.top = _this.divTop - 1;<br> }<br> (e) 잡기 {<br> }<br> },<br> <br> //프롬프트 상자 닫기<br> 닫기: function() {<br> This.eMsg.style.visibility = '숨김';<br> If (this.objTimer) window.clearInterval(this.objTimer);<br> },</p> <p> //프롬프트 상자 표시<br> 표시: 함수() {<br> var divTop =parseInt(this.eMsg.style.top, 10);<br> This.divTop = divTop;<br> var divLeft =parseInt(this.eMsg.style.left, 10);</p> <p> var divHeight =parseInt(this.eMsg.offsetHeight, 10);<br> This.divHeight = divHeight;</p> <p> var divWidth = parsInt(this.eMsg.offsetWidth, 10);<br> var docWidth = document.body.clientWidth;<br> var docHeight = document.body.clientHeight;<br> This.docHeight = docHeight;</p> <p> this.eMsg.style.top = parsInt(document.body.scrollTop, 10) docHeight 10;<br> This.eMsg.style.left = parsInt(document.body.scrollLeft, 10) docWidth - divWidth;<br> This.eMsg.style.visibility = "표시됨";</p> <p> var _this = this;<br> This.objTimer = window.setInterval(function() { _this.moveDiv(_this); }, 10);<br> }<br> }</p> <p>var msgTip = new messageTip({ name: 'eMeng' });<br> window.onload = function() { msgTip.show() };<br> window.onresize = function() { msgTip.rePosition(msgTip) };</p> </div> <p>이 글이 모든 분들의 웹 프로그래밍 디자인에 도움이 되기를 바랍니다. </p></span></div>
