Автор

12 05.2017
Простое всплывающее окно на jQuery

Простое всплывающее окно на jQuery


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

 

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

 

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

Структура HTML очень проста: .cd-popup-div, который содержит всплывающее окно (включая полупрозрачный фон), контейнер cd-popup, который является оболочкой содержимого, неупорядоченный список для двух вызовов - Кнопок действий и тега привязки, который используется для закрытия всплывающего окна.

<div class="cd-popup" role="alert">
<div class="cd-popup-container">
<p>Are you sure you want to delete this element?</p>
<ul class="cd-buttons">
<li><a href="#0">Yes</a></li>
<li><a href="#0">No</a></li>
</ul>
<a href="#0" class="cd-popup-close img-replace">Close</a>
</div> <!-- cd-popup-container -->
</div> <!-- cd-popup -->

 

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

Единственное, что стоит отметить в CSS - это хороший переход, когда всплывающее окно становится видимым. Это достигается путем объединения свойств видимости и непрозрачности с переходом CSS3. Для обертки содержимого позиция по умолчанию слегка сдвинута вверх в начале transform: translateY(-40px) и изменена в конце перехода на translateY (0).

.cd-popup {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
 
.cd-popup.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}
 
.cd-popup-container {
  transform: translateY(-40px);
  transition-property: transform;
  transition-duration: 0.3s;
}
 
.is-visible .cd-popup-container {
  transform: translateY(0);
}

 

Вот и всё!


vk.com/club.ssdru

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


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

10 06.2013
Простое всплывающее окно на jQuery

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


25 03.2013
Простое всплывающее окно на jQuery

Еще одна полезная для сайтов вещь - вставка текущей даты. Примеров скриптов даты можно найти в интернете десятки, однако многие из них, на мой взгляд, тяжеловесны и, следовательно, некрасивы. Между тем, используя стандартные средства JavaScript, вставить дату на страницу сайта можно очень просто. Я его очень часто применяю! На картинке (скриншот с действующего сайта)  усадьбы «Сказка»!


28 05.2017
Простое всплывающее окно на jQuery

Список разделенных блоков, которые воссоединяются при прокрутке, имитируя движение по оси Z с помощью преобразований CSS и jQuery.


18 03.2013
Простое всплывающее окно на jQuery

Отображение информации на странице в виде jQuery вкладок.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close