В этом примере статьи описывается, как реализовать коробку подсказки в правом нижнем углу JS. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Реализуйте плагин jquery (opup.js) в коробке с приглашением в правом нижнем углу
Скопируйте код следующим образом: //en.fixed Код, совместим с IE6
// jQuery (function ($ j) {
// $ j ('#pop'). positionfixed ()
//})
(function ($ j) {
$ j.positionfixed = function (el) {
$ j (el).
Новый фиксированный (это)
})
вернуть Эль;
}
$ j.fn.positionfixed = function () {
Возврат $ J.PosionFixed (это)
}
var fixed = $ j.positionfixed.impl = function (el) {
var o = this;
o.sts = {
цель: $ j (el) .css ('position', 'fixed'),
Контейнер: $ J (окно)
}
o.sts.currentcss = {
Верх: o.sts.target.css ('top'),
Справа: o.sts.target.css ('right'),
внизу: o.sts.target.css ('снизу'),
Слева: o.sts.target.css ('left')
}
if (! o.ie6) возвращение;
o.bindevent ();
}
$ j.extend (fixed.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 ()).
o.setpos ();
},
Replective: function () {
var o = this;
var viliting = o.sts.target.parents (). filter (function () {
if ($ j (this) .css ('position') == 'относительный') вернуть это;
})
if (viliting.size ()> 0) virew
вернуть O;
},
initbasepos: function () {
var o = this;
o.sts.basepos = {
Top: O.Sts.Target.Offset (). Top - (O.Sts.currentcss.top == 'Auto'? O.Sts.container.scrolltop (): 0),
Слева: o.sts.target.offset (). Left - (O.Sts.currentcss.left == 'auto'? O.Sts.container.scrollleft (): 0)
}
вернуть O;
},
setPos: function () {
var o = this;
o.sts.target.css ({
Top: 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 ();
}
},
RESIZEEVEV: function () {
var o = this;
return function () {
settimeout (function () {
o.sts.target.css (o.sts.currentcss)
o.initbasepos ();
o.setpos ()
}, 1)
}
}
})
}) (jQuery)
jQuery (function ($ j) {
$ j ('#cooler'). PositionFixed ()
})
// всплывающее всплывающее окно в правом нижнем углу поп
Функция поп (заголовок, url, intro) {
this.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 (время) {
if (! ($. Browser.msie && ($ .browser.version == "6.0") &&! $. Support.style)) {
$ ('#pop'). Sliddown (this.apeartime) .delay (this.delay) .fadeout (400) ;;
} else {// call jquery.fixed.js, решить проблему, которую IE6 не может использовать фиксированную
$ ('#pop'). show ();
jQuery (function ($ j) {
$ j ('#pop'). PositionFixed ()
})
}
},
закрытый: function () {
$ ("#popclose"). Click (function () {
$ ('#pop'). hide ();
}
);
}
}
Пример подсказки в правом нижнем углу
Скопируйте код следующим образом: <! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<Title> jQuery в правом углу в нижнем углу </title>
</head>
<тело>
<h2> Пожалуйста, посмотрите, как у браузера есть нижний угол </h2>
<!-jQuery Pop Up Window Start->
<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 = "opup.js"> </script>
<div id = "pop" style = "display: none;">
<стиль типа = "text/css">
*{} {margin: 0; Padding: 0;}
#pop {} {fourene: #ffff; width: 260px; border: 1px sold #e0e0e0; font-size: 12px; position: fixed; справа: 10px; внизу: 10px;}
#pophead {} {line-height: 32px; fourene: #f6f0f3; border-bottom: 1px solid #e0e0e0; позиция: относительно; font-size: 12px; накладка: 0 0 0 10px;}
#pophead h2 {} {font-size: 14px; color:#666; line-hight: 32px; высота: 32px;}
#pophead #popclose {} {position: Absolute; справа: 10px; top: 1px;}
#pophead a#popclose: hover {} {color:#f00; cursor: pointer;}
#popcontent {} {padding: 5px 10px;}
#poptitle a {} {line-hight: 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-hight: 160%; Margin: 5px 0; Color:#666;}
#popmore {} {text-align: right; border-top: 1px пунктир #ccc; line-hight: 24px; маржа: 8px 0 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/> <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.