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

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

1. jQuery

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

 

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

2. CSS

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

 

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

3. HTML

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

 

Вот на этом и все, надеюсь урок был вам интересен.

На главную