この記事の例では、JSの右下隅にプロンプトボックスを実装する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
右下隅にあるプロンプトボックスにjQueryプラグイン（popup.js）を実装する
コードを次のようにコピーします。//en.fixedコードはIE6と互換性があります
// jQuery（function（$ j）{
// $ j（ '＃pop'）。positionfixed（）
//}）
（function（$ j）{
$ j.positionfixed = function（el）{
$ j（el）.each（function（）{
新しい固定（これ）
}）
Elを返します。
}
$ j.fn.positionfixed = function（）{
返品$ j.positionfixed（this）
}
var sixt = $ j.positionfixed.impl = function（el）{
var o = this;
o.sts = {
ターゲット：$ j（el）.css（ 'position'、 'sixed'）、
コンテナ：$ j（ウィンドウ）
}
o.sts.currentcss = {
トップ：o.sts.target.css（ 'top'）、
右：o.sts.target.css（ 'right'）、
下：o.sts.target.css（ 'bottom'）、
左：o.sts.target.css（ 'left'）
}
if（！o.ie6）return;
o.bindevent（）;
}
$ j.extend（sixt.prototype、{
IE6：$ .browser.msie && $ .browser.version <7.0、
bindevent：function（）{
var o = this;
o.sts.target.css（ 'position'、 'absolute'）
o.OverReLative（）。initbasepos（）;
o.sts.target.css（o.sts.basepos）
o.sts.container.scroll（o.scrollevent（））。resize（o.resizeevent（））;
o.setpos（）;
}、
過剰関連：function（）{
var o = this;
var relative = o.sts.target.parents（）。フィルター（function（）{{
if（$ j（this）.css（ 'position'）== 'relative'）これを返します。
}）
if（relative.size（）> 0）relative.after（o.sts.target）
oを返します。
}、
initbasepos：function（）{
var o = this;
o.sts.basepos = {
TOP：o.sts.target.offset（）。top-（o.sts.currentcss.top == 'auto'？o.container.scrolltop（）：0）、
左：o.sts.target.offset（）。左 - （o.sts.currentcss.left == 'auto'？o.sts.container.scrollleft（）：0）
}
oを返します。
}、
setpos：function（）{
var o = this;
o.sts.target.css（{
トップ：o.sts.container.scrolltop（） + o.sts.basepos.top、
左：o.sts.container.scrollleft（） + o.sts.basepos.left
}）
}、
scrollevent：function（）{
var o = this;
return function（）{
o.setpos（）;
}
}、
resizeevent：function（）{
var o = this;
return function（）{
setimeout（function（）{
o.sts.target.css（o.sts.currentcss）
o.initbasepos（）;
o.setpos（）
}、1）
}
}
}）
}）（jQuery）
jQuery（function（$ j）{
$ j（ '＃footer'）。positionfixed（）
}）
//ポップの右下隅にあるポップアップ機能
function pop（title、url、intro）{
this.title = title;
this.url = url;
this.intro = 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：function（time）{
if（！（$。browser.msie&&（$ .browser.version == "6.0"）&&！$。support.style））{
$（ '＃pop'）。slidedown（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>
<head>
<メタcharset = "utf-8">
<title> jQuery右下隅ポップアップウィンドウ</title>
</head>
<body>
<h2>ブラウザの下部角</h2>のブラウザをご覧ください
<！ - jQueryポップアップウィンドウの開始 - >
<script type = "text/javascript">
window.onload = function（）{
var pop = new Pop（ "これがタイトル、ハハ"、
「URLハイパーリンク」、
「コンテンツの紹介を入力してください。コンテンツの紹介はあります。コンテンツの紹介を入力してください。コンテンツの紹介はあります。コンテンツの紹介を入力してください。コンテンツの紹介はあります」）;
}
</script>
<script type = "text/javascript" src = "jquery.min.js"> </script>
<script type = "text/javascript" src = "popup.js"> </scrip>
<div id = "pop" style = "display：none;">
<style type = "text/css">
*{} {マージン：0;パディング：0;}
#pop {} {background：#ffff; width：260px; border：1px solid＃e0e0e0; font-size：12px; position：fixt; right：10px; bottond：10px;}
#pohead {} {line-height：32px; background：＃f6f0f3; border-bottom：1px solid＃e0e0e0; position：relative; font-size：12px; padding：0 0 10px;}
#pohead H2 {} {font-size：14px; color：＃666; line-height：32px; height：32px;}
#pohead #popclose {} {position：aspolute; right：10px; top：1px;}
#pohead a＃popclose：hover {} {color：＃f00; cursor：pointer;}
#popcontent {} {padding：5px 10px;}
#poptitle a {} {line-height：24px; font-size：14px; font-family： 'microsoft yahei'; color：＃333; font-weight：bold; text-decoration：none;}
#poptitle a：hover {} {color：＃f60;}
#popintro {} {text-indent：24px; line-height：160％; margin：5px 0; color：＃666;}
#popmore {} {text-align：right; border-top：1px点線#ccc; line-height：24px; margin：8px 0 0;}
#popmore a {} {color：＃f60;}
#popmore a：hover {} {color：＃f00;}
</style>
<div id = "pophead">
<a id = "popclose"> close </a>
<h2>温かいリマインダー</h2>
</div>
<div id = "popcontent">
<dl>
<dt id = "poptitle">これがタイトル</dt>です
<dd id = "popintro">これはコンテンツの導入</dd>です
</dl>
<p id = "popmore"> view»</p>
</div>
</div>
<！ - ポップアップウィンドウエンド - >
<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/> jquery右下角弹窗
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。