Процесс создания модальных окон на jQuery

В связи возрастающим интересом пользователей к jQuery, хочу продемонстрировать создания модальных окон для вашего сайта с эффектом затухания, сделать это не так уж и сложно. Как Вы уже, наверное, давно поняли — с помощью jQuery возможно сделать почти все, что угодно.

И так, готовый результат, для ленивых, можно скачать или просмотреть:

1. jQuery

Начнем с jQuery и вставим следующий код между тегами <head></head>, выглядеть она будет так:

$(document).ready(function() {

$('a[name=modal]').click(function(e) {

e.preventDefault();

var id = $(this).attr('href');

var maskHeight = $(document).height();

var maskWidth = $(window).width();

$('#mask').css({'width':maskWidth,'height':maskHeight});

$('#mask').fadeIn(1000);

$('#mask').fadeTo("slow",0.8);

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(2000);

});

$('.window .close').click(function (e) {

e.preventDefault();

$('#mask, .window').hide();

});

$('#mask').click(function () {

$(this).hide();

$('.window').hide();

});

</script>

Как обычно, вначале подключаем фреймворк и далее идет функция.

2. CSS

Вторым этапом создание будет CSS стили. Как Вы видели в демо версии, Вашему вниманию представлены три варианта применения данной функции. Ниже представлены стили оформления для всех 3-х вариантов:

<style>

body {

font-family:verdana;

font-size:15px;

}

a {color:#333; text-decoration:none}

a:hover {color:#ccc; text-decoration:none}

#mask {

position:absolute;

left:0;

top:0;

z-index:9000;

background-color:#000;

display:none;

}

#boxes .window {

position:absolute;

left:0;

top:0;

width:440px;

height:200px;

display:none;

z-index:9999;

padding:20px;

}

#boxes #dialog {

width:375px;

height:203px;

padding:10px;

background-color:#ffffff;

}

#boxes #dialog1 {

width:375px;

height:203px;

}

#dialog1 .d-header {

background:url(images/login-header.png) no-repeat 0 0 transparent;

width:375px;

height:150px;

}

#dialog1 .d-header input {

position:relative;

top:60px;

left:100px;

border:3px solid #cccccc;

height:22px;

width:200px;

font-size:15px;

padding:5px;

margin-top:4px;

}

#dialog1 .d-blank {

float:left;

background:url(images/login-blank.png) no-repeat 0 0 transparent;

width:267px;

height:53px;

}

#dialog1 .d-login {

float:left;

width:108px;

height:53px;

}

#boxes #dialog2 {

background:url(images/notice.png) no-repeat 0 0 transparent;

width:326px;

height:229px;

padding:50px 0 20px 25px;

}

</style>

Стили можно поместить как в отдельный файл, так и в сам документ. В стилях есть несколько путей к картинкам. Помните, если картинки будут переноситься в другую папку, необходимо поменять к ним путь.

3. HTML

Завершающим этапом сегодняшнего урока станет HTML код, который нужно поместить после тега <body>.