Автор

Полноэкранное модальное окно на jQuery

Полноэкранное модальное окно на jQuery


Кнопка вызова к действию, которая анимируется и превращается в полноразмерное модальное окно.

 

ДЕМО
ИСХОДНИКИ

 

Модальные окна используются для отображения связанного контента, временно скрывая основное содержимое. Если представить нашу веб-страницу в виде слоев, распределенных вдоль оси z, то модальные окна находятся сверху.

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

Конечный результат основан на сочетании перехода CSS и преобразований, jQuery и Velocity.

 

Создание структуры

Структура HTML довольно простая: элемент .cd-section используется для обертывания содержимого раздела, кнопки действия (.cd-modal-action) и модального окна (.cd-modal).
Действие .cd-modal-action содержит кнопку .btn, которая используется для запуска действия, и .cd-modal-bg, который используется как модальный фон. Модальное содержимое обернуто в элемент .cd-modal-content и помещается внутри div.cd-modal.

<section class="cd-section">
<!-- section content here -->

<div class="cd-modal-action">
<a href="#0" class="btn" data-type="modal-trigger">Fire Modal Window</a>
<span class="cd-modal-bg"></span>
</div>

<div class="cd-modal">
<div class="cd-modal-content">
<!-- modal content here -->
</div>
</div>

<a href="#0" class="cd-modal-close">Close</a>
</section>

 

Добавление стиля

Мы использовали элемент .cd-modal-bg в качестве фона модального окна: сначала он находится в абсолютном положении и размещен прямо за кнопкой действия .btn с visibility: hidden.
Когда пользователь нажимает кнопку действия, кнопка .btn преобразуется в круг (с использованием класса .to-circle), а .cd-modal-bg становится видимым и масштабируется для охвата всего окна просмотра. Значение шкалы зависит от размера окна просмотра и оценивается (и назначается) с использованием Javascript.

.cd-modal-action {
position: relative;
}
.cd-modal-action .btn {
width: 12.5em;
height: 4em;
background-color: #123758;
border-radius: 5em;
transition: color 0.2s 0.3s, width 0.3s 0s;
}
.cd-modal-action .btn.to-circle {
width: 4em;
color: transparent;
transition: color 0.2s 0s, width 0.3s 0.2s;
}
.cd-modal-action .cd-modal-bg {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-2em);
width: 4em;
height: 4em;
background-color: #123758;
border-radius: 50%;
opacity: 0;
visibility: hidden;
transition: visibility 0s 0.5s;
}
.cd-modal-action .cd-modal-bg.is-visible {
opacity: 1;
visibility: visible;
}

В конце анимации масштабирования видимость модального окна изменяется (с использованием класса .modal-is-visible), чтобы показать его содержимое.

 

Обработка событий

Мы использовали jQuery для оценки тех параметров, которые недоступны через CSS: значение шкалы, присвоенное .cd-modal-bg, и его левое и верхнее положение.
Например, так мы оцениваем значение шкалы:

var btnRadius = $('.cd-modal-bg').width()/2,
	left = $('.cd-modal-bg').offset().left + btnRadius,
	top = $('.cd-modal-bg').offset().top + btnRadius - $(window).scrollTop(),
	scale = scaleValue(top, left, btnRadius, $(window).height(), $(window).width());
 
function scaleValue( topValue, leftValue, radiusValue, windowW, windowH) {
	var maxDistHor = ( leftValue > windowW/2) ? leftValue : (windowW - leftValue),
		maxDistVert = ( topValue > windowH/2) ? topValue : (windowH - topValue);
	return Math.ceil(Math.sqrt( Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2) )/radiusValue);
}

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Полноэкранное модальное окно на jQuery

Галерея-это универсальное средство, которое помогает красиво организовать картинки на сайте. Различный креативный подход к поставленному вопросу позволяет привлечь не только внимание пользователя к необходимому материалу, но и добавить изюминку на сайт. В данном уроке мы рассмотрим как создать достаточно простую и практичную галерею с эффектом скольжения изображений справа на лево при помощи jquery и небольших стилей css. Основная идея состоит в том, что фокусировка направлена на одно изображение, а при выборе другого происходит скольжение.


Полноэкранное модальное окно на jQuery

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


Полноэкранное модальное окно на jQuery

Сегодня мы сделаем новую фото галерею. Недавно я обнаружил еще один приятный JQuery плагин - Galleriffic. Этот плагин хорошо оптимизирован для работы с большими объемами фотографий. Также есть хорошие возможности, как на маленькую картинку, навигации (с нумерацией страниц), jQuery.history плагин интеграции, слайд-шоу с Play/Pause, клавиатуры и т.д.


Полноэкранное модальное окно на jQuery

Рассмотрим оригинальную форму обратной саязи на jQuery. Такая форма легко украсит любой сайт.


75 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close