Автор

Простое всплывающее окно на 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);
}

 

Вот и всё!

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

vk.com/club.ssdru

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



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

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

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


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

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


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

Хотите создать слайдер с миниатюрами изображений для Вашего сайта, да так чтобы они корректно отображались в браузерах и были адаптированы под изменения размеров окна обозревателя, тогда этот урок Вас должен заинтересовать. Для этого мы будем использовать Elastislide - плагин jQuery для адаптивной карусели, которая изменяет размер и алгоритм работы в соответствии с размером экрана. Если вставить карусель в контейнер с изменяющейся шириной, то и она будет изменять ширину.


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

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


75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close