Главная » Файлы » Прочие скрипты » 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 | |
Просмотров: 903 | Загрузок: 228 | |
Всего комментариев: 0 | |
| |