Главная » Файлы » Прочие скрипты » jQuery

Модальное окно с эффектом отдаления заднего плана на CSS3 и jQuery через плагин Avgrund Modal
[ Скачать с сервера (2.0 Kb) ] 25.09.14, 14:45:31



Очень простое модальное окно с непростым эффектом отдаления заднего плана

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

После < /head > на нужных страницах вставляйте:
Код
<script type='text/javascript' src="/js/jquery.avgrund.js"></script>
<link rel="stylesheet" type="text/css" href="/css/avgrund.css">


Следующий код вставьте в самый низ вашего css:
Код
.custom {
  color: #555;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.custom p {
  padding: 10px 20px;
  margin: 30px 0 0;
  font-size: 14px;
  font-weight: 300;
  text-align: justify;
}

.avgrund-close {
  display: block;
  text-transform: uppercase;
  color: #555;
  text-decoration: none;
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 13px;
}

.github, .twitter, .dribble {
  float: left;
  text-align: center;
  font-size: 12px;
  color: white;
  padding: 8px 18px;
  margin: 18px 0 0 20px;
  text-decoration: none;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -ms-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

.buttons {
  width: 390px;
  height: 75px;
  margin: 0 auto;
}

.button {
  display: block;
  background: #ED5E2F;
  color: #FFF;
  text-decoration: none;
  width: 110px;
  text-align: center;
  padding: 10px;
  margin: 15px 0 0 15px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 300;
}


В то место, где должна быть кнопка вызова модального окна:
Код
<a href="#" id="show" class="button left">КЛИК</a>
<script>
$('#show').avgrund({
  height: 200,
  holderClass: 'custom',
  showClose: true,
  showCloseText: 'Закрыть',
  enableStackAnimation: true,
  onBlurContainer: '.container',
  template: '<p>Здесь любой ваш текст</p>'
});
</script>


Скрипт из прикреплённого архива залейте в папку js, файл стиля в папку css

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: Через, плана, на, JQuery, отдаления, эффектом, окно, CSS3, заднего, Модальное
Просмотров: 903 | Загрузок: 228 | Рейтинг: 1.0/3
Всего комментариев: 0
Имя *:
Email: