Мы хотим сделать с помощью Javascript всплывающие (а ещё лучше, постепенно проявляющиеся) окошечки, в которых можно помещать справочную информацию, подсказки и т.п. Браузеры не должны блокировать наши окошечки как "всплывающие окна". Желательно также, чтоб эта информация индексировалась поисковиками, находясь прямо в документе. Мы также не будем использовать огромных внешних библиотек вроде JQuery. Сначала конечный результат:

Нажмите на вопросик, чтоб увидеть окно:

А вот другое окно, с другой статьёй помощи:

Теперь процесс по шагам.

1. Каждый текст для всплывающего окна будет в своём разделе <div>, опишем стили для оформления этих разделов, например, такие:

<style type="text/css">
div.popup, div.popup_active {
  position: absolute;
  z-index: 10;
  display: none;
  width: 200px;
  font-size: 11px;
  padding: 3px;
  color: #666;
  background: #FBFBE5;
  border: 1px solid #C3C3C3
}
div.popup_active { display: block }
</style>

2. Нам понадобится 4 функции на Javascript: show, чтобы показать всплывающее окно, hide, чтобы спрятать его, animate, чтобы управлять процессом "всплывания" и служебная функция getPosition, которая поможет вычислить положение объектов на странице. Вот соответствующие коды:

<SCRIPT type="text/javascript">
<!--
function show (evt, id) {
 var evt = evt || window.event;
 var o = evt.target || evt.srcElement;
 var f = document.getElementById('cur_popup_note');
 if (f == null) {
  f = document.createElement('div');
  f.setAttribute ('id', 'cur_popup_note');
  f.setAttribute ('style', 
  'progid:DXImageTransform.Microsoft.Alpha(opacity=100); '+
  'opacity: 1; display: block; top: 0px; left: 0px;'+
  'width:200px; height:auto;');
  f.setAttribute('class', 'popup');
  document.body.appendChild(f);
 }
 f.opacityFilter = 0;
 f.innerHTML = '<img src="x.gif" height="13" width="13" border="0" id="x_image" '+
  'style="cursor:pointer;float:right;" onclick="hide();">'+
  '<div style="padding: 10px">' +  
  document.getElementById(id).innerHTML + '</div>';
 f.className = 'popup_active';
 f.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (f.opacityFilter * 100) + ');';
 f.style.opacity = f.opacityFilter;
 f.style.display = 'block';
 var o_coords = getPosition(o);
 var f_coords = getPosition(f);
 var calculatedTop = (f.offsetTop + (o_coords.top - f_coords.top));
 var calculatedLeft = (f.offsetLeft + (o_coords.left - f_coords.left));
 if (calculatedTop + f.offsetHeight > document.body.offsetHeight) 
  calculatedTop = document.body.offsetHeight - f.offsetHeight;
 if (calculatedLeft + 200 > document.body.offsetWidth) 
  calculatedLeft = document.body.offsetWidth - 220;
 f.style.top = calculatedTop + 'px';
 f.style.left = calculatedLeft + 'px';
 window.setTimeout('animate()', 50);
 evt.cancelBubble = true;
 return false;
}
 
function hide() {
 var div = document.getElementById('cur_popup_note');
 if (div != null) {
  div.className = 'footnote_new';
  div.style.display = 'none';
 }
 return false;
}
 
function animate() {
 var f = document.getElementById('cur_popup_note');
 f.opacityFilter += 0.05;
 f.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (f.opacityFilter * 100) + ');';
 f.style.opacity = f.opacityFilter;
 if (f.opacityFilter<1) window.setTimeout('animate()', 50);
}
 
function getPosition(offsetTrail) {
 var offsetLeft = 0;
 var offsetTop = 0;
 while (offsetTrail) {
  offsetLeft += offsetTrail.offsetLeft;
  offsetTop += offsetTrail.offsetTop;
  offsetTrail = offsetTrail.offsetParent;
 }
 return { left:offsetLeft, top:offsetTop }
}
// -->
</SCRIPT>

3. Подготовим 2 маленьких картинки для вывода кликабельного значка с вопросиком (q.gif) и кнопки закрытия всплывающего окна (x.gif):

4. В нужных местах документа разместим ссылки-вопросики вида

Текст документа...
<img    
 border="0" 
 onclick="return show(event, 'note1')" src="q.gif"
 alt="" title="Нажмите здесь для помощи"
 style="cursor: pointer;"
>

здесь note1 - атрибут id соответствующего тега <div> документа (который содержит эти самые тексты из всплывающих окошек).

5. Внизу документа (или где удобно, их всё равно не видно) набьём сами текстики помощи, они могут содержать любую нужную нам разметку HTML.

<div id='note1' style='display: none'>
 <p><b>Статья помощи 1</b>
 <p>Текст статьи, с любым HTML
</div>

В отличие от классических окон Javascipt, открываемых методом window.open, этим окошкам никакие фильтры всплывающих окон не страшны.

 Пример в работе

гостевая; E-mail