Установка:
Создаём глобальный блок под именем MODAL. После создания вам надо прописать на всех страницах сайта, после , код этого глобального блока. Он у нас будет $GLOBAL_MODAL$ Потом вставляем в этот глобальный блок следующий код:
Code
<div id="mask"></div>
<script>
$(document).ready(function() {
$('a[name=modal]').click(function(e) {
e.preventDefault();
var top = $(this).offset().top
var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({
'width':maskWidth,
'height':maskHeight
});
$('#mask').css('opacity', 0).show();
$('#mask').fadeTo(1000,0.85);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
$(id).fadeIn(1000);
});
$('.window .close').click(function (e) {
e.preventDefault();
$('#mask').fadeOut(1000);
$('.window').fadeOut(500);
});
$('#mask').click(function () {
$(this).fadeOut(1000);
$('.window').fadeOut(500);
});
});
</script>
<style>
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
.window {
position:absolute;
left:0;
top:0;
z-index:9999;
}
</style>
<style>
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
.window {
opacity:0.8;
position:fixed;
left:0;
top:0;
z-index:9999;
}
</style>
После надо создать второй глобальный блок, под именем NODAL. Делаем такую же операцию что и с первым глобальным блоком, но код который надо вставить в глобальный блок надо изменить. Вообще в этот глобальный блок надо прописывать сами модальные окна. Вот код первого глобального окна:
Code
<div id="static1" style="display:none;" class="window" align="center">
<table width="400" height="200" cellspacing="0">
<tr><td background="Адрес к изображению фона модального окна.">
<center>
Содержимое в модальном окне.
</center>
</td></tr>
</table>
</div>
Все следующие окна прописываем тут же.
В этом коде можно изменить...
static1 - ID модального окна. Для каждого модального окна надо присваивать свой ID.
После этого надо создать ссылку на модальное окно.
Пишем в нужное место:
Code
<a href="#static1" name="modal">Название ссылки</a>
Кому непонятно, пишите в личку, помогу установить если надо.
