Автор

Полноэкранное модальное окно на 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

Бывают такие ситуации, когда необходимо реализовать достаточно простые эффекты, но из-за упущенных элементарных знаний возникают сложности. Так мы сегодня решили Вам рассказать и показать процесс реализации простого hover-эффекта для изображений с эффектом параллакса. Идея достаточно проста и банальна, у нас есть изображение, которое мы помещаем в рамку и скрываем края, при наведении курсора мыши изображение будет оживать и следовать за курсором, что придаст эффект «живого» изображения для ваших картинок.


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

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


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

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


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

Пользователи, очевидно, не любят чувствовать себя потерянными, когда они перемещаются по сайту. Именно поэтому мы представили UX-шаблоны, чтобы показать, как они попали на конкретную страницу (хлебные крошки) и что будет дальше (индикаторы с несколькими шагами).


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

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


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

Надёжный хостинг

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

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close