Создаём модальные окна с плавным появлением и исчезанием на jQuery для uCoz
Установка
скачатьhttp://depositfiles.com/files/6zqhnk3mh
1) Создайте глобальный блок с любым именем
Вставьте в блок следующий код:
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>
<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>
Это блок будет отвечать у нас за все функции модальных окон и код этого блока необходимо прописать на всех страницах,
на которых у вас будут выводиться модальные окна после /head.
2) Оформление модальных окон
В нём мы будем прописывать оформления для каждого отдельного окна. К примеру, код первого окна будет у нас примерно таким:
Code
<div id="static1" style="display:none;" class="window" align="center">
<table width="400" height="200" cellspacing="0">
<tr><td background="/modal_login.png">
<center>
Код в модальном окне
</center>
</td></tr>
</table>
</div>
<table width="400" height="200" cellspacing="0">
<tr><td background="/modal_login.png">
<center>
Код в модальном окне
</center>
</td></tr>
</table>
</div>
Здесь разберём поподробнее:
1" - Уникальный идентификатор для каждого окна. Если для первого окна у
нас static1, то для второго будет static2, для третьего - static3 и
т.д...
3) Вот так прописываем ссылку для нашего первого окна:
Code
<a href="#static1" name="modal">Ссылка для вызова окна</a>
1" - вызывает окно с идентификатором 1
Comments 0