Этот скрипт реализует открытие блока по ссылке. И ссылка, и сам блок могут находиться где угодно. Один скрипт позволяет применять неограниченное количество задействованных блоков...
Посмотреть демо сего действа:
демо
Реализуется сия красивость очень просто:
В шапку сайта добавляем сам скрипт (перед </head>):
Код: Выделить всё
<script type="text/javascript">
function openbox(id){
display = document.getElementById(id).style.display;
if(display=='none'){
document.getElementById(id).style.display='block';
}else{
document.getElementById(id).style.display='none';
}
}
</script>(+, разумеется, у вас должна быть подключена библиотека)
вроде этой (подключается там же):
Код: Выделить всё
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>Затем прописываете ссылки-указатели. Если пропишите в шапке - они будут везде на сайте.
Ссылка выглядит так:
Код: Выделить всё
<a href="#" title="открыть" onclick="openbox('block1'); return false">ссылка</a>либо, если вы используете картинку
Код: Выделить всё
<a href="#" title="открыть" onclick="openbox('block1'); return false"><img src="адрес картинки" class="info" /></a>Блок вывода информации будет выглядеть так:
Код: Выделить всё
<div id="block1" style="display:none;">
<a href="#" title="закрыть" onclick="openbox('block1'); return false" class="cloze">х</a>
здесь находится информация блока
</div>Здесь в блок тоже встроена ссылка, позволяющая закрывать этот блок изнутри самого блока.
Вроде бы всё... Изменяя в строке id="block1" и onclick="openbox('block1'); названия блоков (block1) - можно увеличивать количество независимых модулей.
Работает сия конструкция очень просто: скрипт открывает и закрывает блок под тэгом id, а в блок вывода введена функция "закрыт по умолчанию", т.е. display:none;. При клике на ссылку срабатывает скрипт и открывает содержимое блока под тегом id="".
Небольшая красивость. Можно ввести в <div id="block1" ... стилевой класс и сделать вывод блока информации в любое место странички и закрепить его там.
Предположим, вы используете класс focus. Тогда надо будет добавить в стилевой файл
Код: Выделить всё
.focus {
width: 200px; /*Ширина блока */
height: 100px; /* Высота блока */
position: fixed; /* Фиксированное положение */
right: 0px; /* Расстояние от правого края окна браузера */
left: 5px; /* Расстояние от левого края окна браузера */
top: 5px; /* Расстояние сверху */
padding: 0px; /* Внутренний отступ текста от края */
background: #ececec; /* Цвет фона */
border: 1px solid #333; /* Параметры рамки */
margin: 5px; /* Внешний отступ между блоком и остальным текстом */
z-index: 3000; /* Поверх остальных слоёв. То есть это - 3000-ый слой */
}а ваш блок будет выглядеть так:
Код: Выделить всё
<div id="block1" style="display:none;" class="focus">class="cloze" в информационном блоке позволяет выводить "крестик закрытия" в правый верхний угол блока.
выглядит он так:
Код: Выделить всё
.cloze {
float:right;
margin-right:5px;
margin-top:5px;
}Удобная штука, однако.
Скачать себе демо-версию:
Скачать из файлового архива сайта
