Шаг 1, установим JS:
Так как в системе uCoz уже установлена библиотека jQuery, нам потребуется установить в самый низ вашей страницы перед тегом </body>только два файла js:
JS
<script type='text/javascript' src='http://ucoz-helper.ucoz.com/js_jquery/simplemodal.js'></script>
<script type='text/javascript' src='http://ucoz-helper.ucoz.com/js_jquery/basic.js'></script>
Давайте рассмотрим подробнее файл basic.js:
JS
jQuery(function ($) {
$('#okno_info').click(function (e) {
$('#content_info').modal();
return false;
});
$('#okno_admin').click(function (e) {
$('#content_admin').modal();
return false;
});
});
для каждого нового окна, нам следует прописать уникальный идентификатор (id), который мы будем использовать в html коде, в нашем случае это:
для первого окна:
#okno_info - идентификатор для ссылки
#content_info - идентификатор для ячейки div
для второго окна:
#okno_admin - идентификатор для ссылки
#content_admin - идентификатор для ячейки div
Шаг 2, установим HTML:
и так, чтобы выше приведённый код работал,нам следует создать ссылку и div ячейку с нужным идентификатором который мы рассмотрели выше:
HTML-Code
<a href="#" id="okno_info">О проекте</a>
<div id="content_info" class="basic_content">ваш контент</div>
как вы могли заметить у каждой ячейки div того или иного окна, прописан класс, который будет отвечать за скрытие данной ячейки от глаз пользователей.
Шаг 3, установим CSS:
Наше с вами окно почти готово, осталось прописать нужные стили:
CSS-Code
/* Содержимое контента*/
.basic_content {
display:none;
}
.basic_content p{
padding: 0px;
margin-bottom: 10px;
}
.basic_content h3{
font:100%/1.5 Verdana,Arial,sans-serif;color:#6597bd;font-weight:700;
padding: 0px;
margin-bottom: 10px;
}
/* Тёмный фон при открытии окна*/
#simplemodal-overlay {
background:#000;
cursor:wait;
}
/* Основной контейнер */
#simplemodal-container {
text-align:justify;
font: 115%/1.5 Verdana,Arial,Helvetica, sans-serif;
color:#bbb;
width:600px;
height:350px;
background:#333;
border:4px solid #444;
}
#simplemodal-container .simplemodal-data {
padding:10px;
}
/* Кнопка закрыть вверху окна */
#simplemodal-container a.modalCloseImg {
background:url(http://ucoz-helper.ucoz.com/js_jquery/x.png) no-repeat;
width:25px;
height:29px;
display:inline;
z-index:3200;
position:absolute;
top:-15px;
right:-16px;
cursor:pointer;
}
Обратите внимания на то, что размер окна следует изменять в css стилях, изменяя параметр width:600px; height:350px; если данные значения оставить без изменения, то у ячейки div появиться полоса прокрутки, что весьма удобно при большом количестве информации.
· 
21:55
