이 기사 예제는 JS의 오른쪽 하단에 프롬프트 상자를 구현하는 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
오른쪽 하단의 프롬프트 상자에서 jQuery 플러그인 (popup.js)을 구현하십시오.
다음과 같이 코드를 복사하십시오 : //en.fixed 코드는 IE6과 호환됩니다
// jQuery (function ($ j) {
// $ j ( '#pop'). positionfixed ()
//})
(기능 ($ j) {
$ j.positionFixed = function (el) {
$ j (el) .Each (function () {
새로운 고정 (this)
})
el el;
}
$ j.fn.positionFixed = function () {
return $ j.positionfixed (this)
}
var 고정 = $ j.positionFixed.impl = function (el) {
var o = 이것;
O.sts = {
대상 : $ j (el) .css ( '위치', '고정'),
컨테이너 : $ J (창)
}
o.sts.currentcss = {
상단 : O.sts.target.css ( 'top'),
오른쪽 : o.sts.target.css ( '오른쪽'),
하단 : o.sts.target.css ( '하단'),
왼쪽 : o.sts.target.css ( '왼쪽')
}
if (! o.ie6) 반환;
O.Bindevent ();
}
$ j.extend (고정 .prototype, {
IE6 : $ .Browser.msie && $ .Browser.version <7.0,
bindevent : function () {
var o = 이것;
o.sts.target.css ( '위치', '절대')
O.Overrelative (). initbasepos ();
O.sts.target.css (o.sts.basepos)
O.sts.container.scroll (O.scrollevent ()). resize (o.resizeevent ());
O.setpos ();
},
과다 관련 : function () {
var o = 이것;
var regal = o.sts.target.parents (). 필터 (function () {
if ($ j (this) .css ( '위치') == '상대적') 이것을 반환합니다.
})
if (realative.size ()> 0) intave.after (o.sts.target)
반품 o;
},
initbasepos : function () {
var o = 이것;
o.sts.basepos = {
상단 : O.sts.target.offset (). 상단 - (O.sts.currentcss.top == 'auto'? o.sts.container.scrolltop () : 0),
왼쪽 : O.sts.target.offset (). 왼쪽 - (O.sts.currentcss.left == 'auto'? o.sts.container.scrollleft () : 0)
}
반품 o;
},
setpos : function () {
var o = 이것;
o.sts.target.css ({
상단 : O.sts.container.scrolltop () + O.sts.basepos.top,
왼쪽 : O.sts.container.scrollleft () + O.sts.basepos.left
})
},
Scrollevent : function () {
var o = 이것;
return function () {
O.setpos ();
}
},
resizeevent : function () {
var o = 이것;
return function () {
settimeout (function () {
O.sts.target.css (o.sts.currentcss)
O.initbasepos ();
O.setpos ()
}, 1)
}
}
})
}) (jQuery)
jQuery (function ($ j) {
$ j ( '#풋내어'). 위치 문제 ()
})
// 팝의 오른쪽 하단에있는 팝업 기능
기능 팝 (제목, URL, 소개) {
this.title = 제목;
this.url = url;
this.intro = 소개;
this.apeartime = 1000;
this.hidetime = 500;
this.delay = 10000;
// 정보 추가
this.addinfo ();
//보여주다
this.showdiv ();
//폐쇄
this.closediv ();
}
pop.prototype = {
addInfo : function () {
$ ( "#poptitle a"). attr ( 'href', this.url) .html (this.title);
$ ( "#popintro"). html (this.intro);
$ ( "#popmore a"). attr ( 'href', this.url);
},
showdiv : 함수 (시간) {
if (! ($. browser.msie && ($ .Browser.Version == "6.0") &&! $. support.style)) {
$ ( '#pop'). 슬라이드 타운 (this.apeartime) .delay (this.delay) .fadeout (400) ;;
} else {// 호출 jquery.fixed.js, ie6가 고정을 사용할 수없는 문제를 해결합니다.
$ ( '#pop'). show ();
jQuery (function ($ j) {
$ j ( '#pop'). positionfixed ()
})
}
},
Closediv : function () {
$ ( "#popclose"). 클릭 (function () {
$ ( '#pop'). hide ();
}
);
}
}
오른쪽 하단에있는 프롬프트 상자의 예
다음과 같이 코드를 복사하십시오. <! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> jQuery 오른쪽 코너 팝업 창 </title>
</head>
<body>
<H2> 브라우저의 코너가 더 낮습니다
<!-jQuery 팝업 창 시작->
<script type = "text/javaScript">
Window.onload = function () {
var pop = new Pop ( "여기에 제목이 있습니다, 하하",
"URL 하이퍼 링크",
"콘텐츠 소개를 입력하십시오. 여기에 컨텐츠 소개가 있습니다. 콘텐츠 소개를 입력하십시오. 여기에 내용 소개가 있습니다. 콘텐츠 소개를 입력하십시오. 여기에 내용 소개가 있습니다");
}
</스크립트>
<script type = "text/javaScript"src = "jquery.min.js"> </script>
<script type = "text/javaScript"src = "popup.js"> </script>
<div id = "pop"style = "display : none;">
<스타일 유형 = "텍스트/CSS">
*{} {마진 : 0; 패딩 : 0;}
#pop {} {배경 : #ffff; 너비 : 260px; 테두리 : 1px 고체 #e0e0e0; font-size : 12px; 위치 : 고정; 오른쪽 : 10px; 하단 : 10px;}
#Pophead {} {line-height : 32px; 배경 : #f6f0f3; 경계-바닥 : 1px solid #e0e0e0; 위치 : 상대; font-size : 12px; 패딩 : 0 0 10px;}
#pophead h2 {} {font-size : 14px; 컬러 :#666; 라인-리이트 : 32px; 높이 : 32px;}
#pophead #popclose {} {위치 : 절대; 오른쪽 : 10px; 상단 : 1px;}
#popead a#popclose : hover {} {color :#f00; 커서 : 포인터;}
#PopContent {} {패딩 : 5px 10px;}
#poptitle a {} {line-reight : 24px; font-size : 14px; font-family : 'microsoft yahei'; 컬러 :#333; font-weight : bold; text-decoration : none;}
#poptitle a : hover {} {color :#f60;}
#PopIntro {} {텍스트-안정 : 24px; 선-하이이트 : 160%; 마진 : 5px 0; 색상 :#666;}
#popmore {} {텍스트-알림 : 오른쪽; 경계선 : 1px 점선 #ccc; line-height : 24px; 마진 : 8px 0 0;}
#popmore a {} {색상 :#f60;}
#popmore a : 호버 {} {color :#f00;}
</스타일>
<div id = "Pophead">
<a id = "popclose"> 닫기 </a>
<H2> 따뜻한 알림 </h2>
</div>
<div id = "popcontent">
<dl>
<dt id = "Poptitle"> 여기 제목 </dt>입니다
<dd id = "popintro"> 이것은 내용 소개 </dd>입니다
</dl>
<p id = "popmore">보기»</p>
</div>
</div>
<!-팝업 창 끝->
<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <b r/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br /> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> jQuery 右下角弹窗
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.