Всплывающая панель с контентом (продолжение)

Установка всплывающей панели на сайт блочной вёрстки

Если у Вас не выполнены действия, оговоренные на первой странице, сделайте это. А именно, скачайте учебный материал и выполните 1-й и 2-й пункты раздела «Установка всплывающей панели».

Если ваш сайт на DIV, можно позиционировать блоки DIV относительно «родительского» блока с помощью CSS, а именно атрибута position:absolute и его свойств: left, top, right и bottom.  Для осуществления этого действия выполните несколько шагов:

Шаг 1. Создайте пустой контейнер («родительский блок») для всплывающего блока, используя свойство position: relative;

Для этого в файле стилей создайте селектор #container_panel и пропишите параметры: ширину (width:680px;), высоту (height:520px;), выравняйте по центру (margin: 0 auto;). Цветовой фон контейнера (background-color:#BDB76B;) я специально задал, чтобы было видно, затем его можно сделать белым:

#container_panel
{
width: 680px;
height: 520px;
background-color: #BDB76B;
position: relative;
margin: 0 auto;
}

В раздел body впишите код контейнера с id="container_panel":

<div id="container_panel"></div>

В результате получаем пустой («родительский») блок, в котором будет всплывать панель:

Шаг 2. Внутри этого блока создаем еще один <div id="panel"></div> и используя свойство position: absolute; позиционируем блок (top, bottom, left, right). Для этого в файл стилей добавляем селектор #panel:

#panel
{
position: absolute;
top: 5px;
left: 20px;
}

Так выглядит код блоков до вставки кода панели:

  <div id="container_panel">
    <div id="panel">
     Здесь код всплывающей панели
      </div>
  </div>

Этот код необходимо расположить в разделе body в том месте, где будет всплывать панель:

  <div id="container_panel">
    <div id="panel">
      <!--реклама в панели-->
      <div id="reg_form" style="display:none;">
      <a href="URL-адрес" target="_blank"><img src="img/файл изображения.jpg" width="640" height="480" border="0" alt="название"></a>
     </div> 
      <!--/реклама в панели--> 
    </div>
  </div>

После того, как всё сделано, получится следующее:

В этом месте можно перезагрузить страницу, чтобы было удобнее посмотреть демо-пример всплывающей панели.

Конечно, в моём варианте, расположение панели не самое выгодное. Чтобы посетители сайта её замечали, она, скорее всего, должна располагаться ближе к верху страницы. Но, это уже ваше дело, куда её определить. Успехов в освоении материала. До новых встреч. L.M.