Простое модальное окно для начинающих с js. Создаем модальное окно на HTML5 и CSS3

Навигация по фотографиям в портфолио с возможностью перемещаться вверх, вниз, влево или вправо. Используется jQuery .

Используется основная DIV обертка внутри которой находятся: фон, стрелки навигации и сама галерея с картинками:

Вверх Вниз Назад Вперед

В начале определим стиль основного контейнера. Устоновим фиксированную позицию и отцентрируем по середине экрана с помощью left и top и margin :

#portfolio { position:fixed; top:50%; left:50%; z-index:1; width:1000px; height:500px; margin:-250px 0 0 -500px; }

Контейнер с фоном тоже сделаем фиксированным и добавим эффект точечного освещения с помощью bacground-image:

#background { position:fixed; top:0; left:0; width:100%; height:100%; z-index:2; background:url(../images/bg.png) no-repeat center; }

Галерею позиционируем абсолютно:

#portfolio .gallery, #portfolio .gallery .inside { position:absolute; top:0; left:0; }

Галерея будет занимать всё пространство нашей странички с портфолио:

#portfolio .gallery { width:100%; height:100%; overflow:hidden; }

Для DIVа inside установим z-index:1;

#portfolio .gallery .inside { z-index:1; }

Теперь поработаем над стилем стрелок. Определим сначала общий стиль:

#portfolio .arrows a { position:absolute; z-index:3; width:32px; height:32px; background-image:url(../images/arrows.png); background-repeat:no-repeat; outline:none; text-indent:-9999px; }

И затем стиль всех стрелочек индивидуально:

#portfolio .arrows .prev, #portfolio .arrows .up { display:none; } #portfolio .arrows .up, #portfolio .arrows .down { left:50%; margin-left:-16px; } #portfolio .arrows .prev, #portfolio .arrows .next { top:180px; } #portfolio .arrows .up { background-position:0 -64px; top:20px; } #portfolio .arrows .down { background-position:0 -96px; bottom:120px; } #portfolio .arrows .prev { background-position:0 -32px; left:60px; } #portfolio .arrows .next { background-position:0 0; right:60px; } #portfolio .arrows .up:hover { background-position:-32px -64px; } #portfolio .arrows .down:hover { background-position:-32px -96px; } #portfolio .arrows .next:hover { background-position:-32px 0; } #portfolio .arrows .prev:hover { background-position:-32px -32px; }

Для DIV с классом item , которые являются оболочками наших изображений, стили будут такие:

#portfolio .item { position:absolute; top:0; width:1000px; height:400px; }

Каждая оболочка изображений будет абсолютно позиционироваться и занимать все пространство:

#portfolio .item div { position:absolute; left:0; width:100%; height:100%; }

Каждое изображение будет по центру. Имейте ввиду , что в Демо у нас изображения шириной в 600px , поэтому если у вас изображения разных размеров, то их нужно привести к одной и той же ширине.

А это стиль маленьких квадратиков, которые также выполняют роль навигации по изображениям портфолио, как и стрелки (добавляться они будут динамически):

#portfolio .paths { position:absolute; bottom:60px; left:50%; margin-left:-30px; z-index:4; } #portfolio .paths div { position:absolute; top:0; } #portfolio .paths a { background:#333; display:block; position:absolute; left:0; outline:none; } #portfolio .paths a:hover, #portfolio .paths .active { background:#fff; }

В шапке подключаем скрипты:

Сначала jQuery , затем плагин и скрипт инициализации.
По умолчанию у плагина portfolio.js такие параметры:

$("#portfolio").portfolio({ image: { width: 600, height: 400, margin: 20 }, path: { width: 10, height: 10, marginTop: 5, marginLeft: 5 }, animationSpeed: 400 });
Размеры изображения и отступ вокруг. Далее размеры и отступы навигационных квадратиков. И последнее это скорость анимации в мс .

Грамотно составленное и визуально оформленное , в нашем случае, это отдельная страница, является важным элементом личного сайта или блога, любого специалиста, достигшего определенного уровня мастерства в своей профессиональной деятельности.
Страница портфолио, это такой своеобразный отчет, или визуальное резюме, с помощью которого, вы сможете наглядно продемонстрировать читателям и посетителям сайта/блога, набор наиболее удачных реализованных работ, будь-то фотографии, статьи, публикации, элементы дизайна и т.п.
У меня такой странички нет и, это с моей стороны, досадное упущение, которое нужно, как можно скорее исправить, над чем собственно в данный момент и работаю.
На бескрайних просторах глобальной сети, можно найти огромное количество готовых шаблонов страниц для организации портфолио, и разнообразие таких страничек, по-настоящему впечатляет. Так что, кому в лом вникать во все тонкости веб-дизайна и разработки, всегда смогут найти подходящий для себя вариант. Ну, а для страждущих познаний в сайтостроительстве, предлагаю разобрать пример адаптивной верстки, простой страницы портфолио, с фильтрацией выполненных работ по категориям, выполненной на , разбавленной привлекательным эффектом перехода, с элементами анимации .

Макет странички, исполняемый javascript и некоторые элементы оформления, выдал «на гора», замечательный веб-дизайнер и разработчик Kevin Liew (queness.com). При выборе оптимального решения, для меня было важно, это простота исполнения, функциональность плагина jQuery, корректная работа во всех современных браузерах, и учитывая всевозрастающую популярность использования различных мобильных устройств, для интернет-серфинга, адаптивность дизайна будущей страницы. Никаких вычурных, дизайнерских наворотов и тяжеловесных плагинов.

Базовый макет состоит из двух основных элементов пользовательского интерфейса, которые нам предстоит построить, это навигации по вкладкам для фильтрации категорий представленных работ, и сама сетка миниатюр с эффектом всплывающей подписи при наведении.
Для начала, чтобы все в итоге заработало, будет необходим jQuery не ниже версии 1.7.0. Если он у вас еще не подключен, то добавьте следующую строку перед тегом :

Запустите плагин MixItUp в работу, этот код вставьте после вышеуказанных файлов:

$(function () { var filterList = { init: function () { $("#portfoliolist").mixitup({ targetSelector: ".portfolio", filterSelector: ".filter", effects: ["fade"], easing: "snap", // call the hover effect onMixEnd: filterList.hoverEffect() }); }, hoverEffect: function () { $("#portfoliolist .portfolio").hover(function () { $(this).find(".label").stop().animate({bottom: 0}, 200, "easeOutQuad"); $(this).find("img").stop().animate({top: -30}, 500, "easeOutQuad"); }, function () { $(this).find(".label").stop().animate({bottom: -40}, 200, "easeInQuad"); $(this).find("img").stop().animate({top: 0}, 300, "easeOutQuad"); }); } }; filterList.init(); });

Отдельно рассматривать все опции плагина, смысла нет, по умолчанию выставлен довольно оптимальный вариант. Ну, если уж кого вставит на эксперименты с параметрами, пожалуйста, все в ваших силах.

Для формирования макета страницы и внешнего вида элементов, подключаете к документу парочку файлов . , один для базовых стилей, обзовем его например: layout.css и еще один маленький CSS файл normalize.css , для обеспечения лучшей согласованности браузеров в стандартном оформлении элементов:

Теперь разберем все по порядку, по возможности без лишней воды, доступно и понятно, на родном, многострадальном нашем языке.

• Все
• Приложения
• Визитки
• Иконки
• Логотип
• Веб-Дизайн

На панели навигации, размещаем весь список работ, разбитый на категории. Нам необходимо каждую категорию портфолио через атрибут data-cat связать с тем или иным пунктом панели навигации в соответствии со значением в атрибуте data-filter . Путем сопоставления значений data-filter с data-cat , и будет выполняться фильтрация элементов портфолио по категориям.
Кроме этого, добавим к миниатюре, спрятанную до поры до времени, небольшую панель с названием работы и заголовком категории, всплывающую только при наведении на картинку. А чтобы легче сформировать внешний вид всей этой конструкции в CSS, пропишем соответствующие классы элементам:

Хостинг Beget.Ru Логотип .........

Обратите внимание, что вы можете добавить ссылки к картинке или непосредственно в подпись, для того чтобы пользователь смог в полном объеме лицезреть все ваши труды.

Теперь, тихим сапом, переходим к самому интересному, к формированию в CSS общих стилей пользовательского интерфейса нашей странички портфолио и адаптивной её версии. В статье укажу лишь базовые (по умолчанию) значения, то есть без каких-либо фоновых картинок и подключенных шрифтов, все это, кому оно надо, можно увидеть в демо, или найти в архиве с исходниками.

Container { position: relative; width: 960px; margin: 0 auto; /* Вы сможете видеть цепь переходов при изменении размеров окна браузера */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #filters { margin:1%; padding:0; list-style:none; } #filters li { float:left; } #filters li span { display: block; padding:5px 20px; text-decoration:none; color:#666; /* добавляем немного тени для текста */ text-shadow: 1px 1px #FFFFFF; cursor: pointer; } /* изменяем фон категории при наведении */ #filters li span:hover { background: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; } /* фон активного пункта категории */ #filters li span.active { background: rgb(62, 151, 221); text-shadow: 0 0 2px #004B7D; color:#fff; } #portfoliolist .portfolio { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width:23%; margin:1%; display:none; float:left; overflow:hidden; } .portfolio-wrapper { overflow:hidden; position: relative !important; background: #666; cursor:pointer; } .portfolio img { max-width:100%; position: relative; } /* по умолчанию подписи скрыты */ .portfolio .label { position: absolute; width: 100%; height:40px; bottom:-40px; } .portfolio .label-bg { background: rgb(62, 151, 221); width: 100%; height:100%; position: absolute; top:0; left:0; } .portfolio .label-text { color:#fff; position: relative; z-index:500; padding:5px 8px; } .portfolio .text-category { display:block; font-size:9px; }

Во второй части, прямо в этой же таблице стилей, с помощью нескольких медиа запросов создадим альтернативные секции CSS. Чтобы макет нашей страницы корректно отображался на экранах различных мобильных устройств, добавим и альтернативные правила CSS для разных экранов в эти секции. Тем самым мы запросто переопределяем любые правила, установленные ранее в нашей CSS таблице для обычных браузеров и добьемся той самой, вожделенной адаптивности.

/* Планшет */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 768px; } } /* Мобильный - Примечание: Дизайн для ширины 320px*/ @media only screen and (max-width: 767px) { .container { width: 95%; } #portfoliolist .portfolio { width:48%; margin:1%; } } /* Мобильный - Примечание: Дизайн для ширины 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 70%; } }

Вот и все. Наша замечательная страничка под емким названием «Портфолио» готова, остается лишь наполнить её своими не менее замечательными и выдающимися работами, и выставить на обозрение всему миру. Можно еще по тихому, скромно так, гордиться собой. Главное не переусердствовать в этом деле.
Смотрите еще раз пример и при необходимости забирайте исходники, на досуге, в тихой домашней обстановке, сможете довести до совершенства эту работу.

При создании урока использовался материал: . Оригинальная, девственно чистая, только что из под пера автора, страница портфолио, находится там же.

Удачи всем и с пользой для тела, провести остатки короткого лета!

Используется jQuery плагин jmFullWall для получения действительно впечатляющих портфолио из фотографий.

Требования

• jQuery 1.4+
• jquery.imgpreload.js (thanks to Dimas Begunoff)
• jquery.imagepanner.js (thanks to Dynamic Drive)
• jmFullWall.js

Совместимость

• Mozilla Firefox
• Google Chrome
• Safari
• Opera

Для Демо 4

res/img/slide/1.jpg res/img/slide/1.jpg Audi Locus Audi Locus res/img/slide/2.jpg res/img/slide/2.jpg Porsche Supercar Porsche Supercar res/img/slide/3.jpg res/img/slide/3.jpg Ford GT Ford GT res/img/slide/4.jpg res/img/slide/4.jpg Lamborghini Murcielago Lamborghini Murcielago res/img/slide/5.jpg res/img/slide/5.jpg Nissan R390 GT1 Nissan R390 GT1 res/img/slide/6.jpg res/img/slide/6.jpg Porsche 911 GT3 RS Porsche 911 GT3 RS

Подключаем файл стилей:

Подключаем скрипты:

$(function(){ $("#wall").jmFullWall({ itemsForRow: 5, itemTransition: "slideDown", itemTransitionSpeed: 150, detailTransitionIn: "slideDown", detailTransitionOut: "slideUp" }); });

• itemTransition :fadeIn , Эффект появления миниатюр. Может быть установлен на "fadeIn", "show" или "slideDown".
• itemTransitionSpeed :200 , Скорость появления миниатюр. Может быть "slow", "normal", "fast" или в миллисекундах (например, 1000).
• itemsForRow :5 , Сколько элементов в строке.
• itemsBtnNext :jmFullWall-next , Название класса для кнопки "Вперед".
• itemsBtnPrev :jmFullWall-prev , Название класса для кнопки "Назад".
• itemsBtnClose :jmFullWall-close , Название класса для кнопки "Закрыть".
• detailTransitionIn :fadeIn , Эффект при открытии изображения. Может быть "fadeIn", "show" или "slideDown".
• detailTransitionInSpeed :500 , Скорость открытия изображения. Может быть "slow", "normal", "fast" или в миллисекундах (например, 1000).
• detailTransitionOut :fadeOut , Эффект при закрытии изображения. Может быть "fadeOut", "hide" или "slideUp".
• detailTransitionOutSpeed :500 , Скорость закрытия изображения. Может быть "slow", "normal", "fast" или в миллисекундах (например, 1000).
• showTooltip :true , Включить подсказки, когда изображение полностью загрузится.
• imgPanning :true , Включить панорамирование изображения, если режим полноэкранный.Enable the panning of the image when is in fullscreen mode.
• imgPanningCenter :true , Центрировать изображение, если режим полноэкранный.
• imgPanningZoom :true , Включить опцию увеличения, если режим полноэкранный.