Пример поля приглашения в правом нижнем углу веб -страницы JS

В этой статье описывается метод реализации коробки под приглашения в правом нижнем углу веб -страницы JS и передается вам для вашей ссылки. Конкретные методы следующие:

HTML -кодовая часть заключается в следующем:

Скопируйте код следующим образом: <style type = "text/css">

.messageTip {граница правая: #455690 1px solid; Пограничная топ: #A6B4CF 1PX SOLID; РЕМЖА СЛЕДУ: #A6B4CF 1PX SOLID; Пограничный подъем: #455690 1PX Твердый; Z-Index: 99999; слева: 0px; Верх: 0px; видимость: скрыта; Ширина: 230px; позиция: абсолютно; Фон:#CFDEF4; Текст-альбом: слева}

.messageTip .close {позиция: абсолют; Справа: 0px; шрифт-вес: жирный шрифт; Подкладка: 4px 4px 0 0;}

.messageTip .close a {Color: красный; размер font: 12px; Текстовое декорация: нет;}

.messageTip .content {border-top: #ffffff 1px solid; граница левые: #ffffff 1px solid}

.messagetip .content .title {color: #1F336b; надоеволок: 4px; Лебь накладки: 4px; Высота: 22px;}

.messageTip .content .msg {граница правая: #b9c9ef 1px solid; граница-лето: #728eb8 1px solid; Пограничная топ: #728EB8 1PX SOLID; Заполнение: 10px; поля: 1px}

</style>

<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 (это, pjso, {

Имя: 'MSG' // Идентификатор тега в течение приглашения

});

this.emsg = document.getElementbyId (this.name);

}

MessageTip.Prototype =

{

// коробка приглашения всегда находится в правом нижнем углу

Перестроение: function (_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 = docheight - divheight + parseint (document.body.scrolltop, 10);

_this.emsg.style.left = docwidth - Divwidth + parseint (document.body.scrollleft, 10);

},

// РАЗВИТНОЕ Ящик медленно поднимается

MOWERIV: 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) {

}

},

// Закройте коробку с приглашением

Close: function () {

this.emsg.style.visibility = 'hidden';

if (this.objtimer) window.clearinterval (this.objtimer);

},

// Показать коробку с подсказкой

show: 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.brolltop, 10) + docheight + 10;

this.emsg.style.left = parseint (document.brollleft, 10) + docwidth - divwidth;

this.emsg.style.visibility = "visible";

var _this = это;

this.objtimer = window.setInterval (function () {_this.moviviv (_this);}, 10);

}

}

var msgtip = new MessageTip ({name: 'emeng'});

window.onload = function () {msgtip.show (); };

window.onresize = function () {msgtip.reposition (msgtip); };

Я надеюсь, что эта статья будет полезна для каждого веб -программирования.