Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> jQuery

arcticModal - простые модальные окна jQuery


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

  Сразу скажу, это Русская разработка Арктической лаборатории. Очень приятно что наши умеют делать очень классные плагины, причём бесплатные и простые в освоении и настройке.
  
  Основные возможности

  • одновременное отображение нескольких окон
  • центрирование окна по вертикали и горизонтали
  • AJAX-загрузка содержимого модального окна с визуализацией процесса
  • скрытие полос прокрутки основного содержимого страницы (содержимое страницы не дёргается при отображении окна)
  • возможность прокрутки окна, если оно не помещается на экран
  • закрытие окна при нажатии Escape или клике на оверлее

  И так, что же нам понадобится для быстрого старта, в общем то только 4 шага, подключаем библиотеку jQuery, сам плагин, стили:

<script src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
<script src="js/arcticmodal/jquery.arcticmodal-0.1.min.js"></script>
<link rel="stylesheet" href="js/arcticmodal/jquery.arcticmodal-0.1.css">

после создаём необходимую html разметку:

<div style="display: none;">
    <div class="b-modal" id="exampleModal">
        <div class="b-modal_close arcticmodal-close">X<div>
        Пример модального окна
  <div>
<div>

и css правила самого окна и кнопки закрыть:

.b-modal {
    position: relative;
    width: 500px;
    padding: 24px;
    background: #fff;
    border: 3px solid #bbb;
    border-radius: 10px;
}
.b-modal_close {
    position: absolute;
    right: 12px;
    top: 6px;
    font-weight: bold;
    color: #999;
    cursor:	pointer;
}
.b-modal_close:hover {
    color: #000;
}

и собственно финишная строчка JavaScript которая и влючает наш плагин:

$(function(){ $('#exampleModal').arcticmodal(); });

  Вот и всё, можно использовать ведь всё готово.
  Скачать свежую версию плагина можно отсюда http://arcticlab.ru/arcticmodal/#download
  Увидеть примеры всегда можно здесь http://arcticlab.ru/arcticmodal/#examples


Дата публикации: 19.01.2013
Опубликовал: Сергей Кашурин
Просмотров: 1804
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


25 поразительных анимаций CSS3, которые улучшат внешний вид вашего сайта
CSS3, сокращение от английского Cascading Style Sheets 3, третье поколение таблиц стилей, которые используются для визуального представления сайта, при минимальном размере кода. Этот последний многообещающий набор стандартов, состоит из большого числа функций и инструментов, которые позволяют улучшить и контролировать дизайн и увеличивать скорость загрузки сайта.
Colorizer: пользователь сам выберет цвет продукта на вашем сайте
Когда вы выбираете машину, или футболку в интернет магазине, хотелось бы вам самим выбрать для неё цвет? Думаю да. В этой статье, я расскажу вам про плагин Colorizer, с помощью которого, для наших дорогих пользователей, мы сможем предоставить возможность выбора цвета продукта в котором он заинтересован, что оставит о нас приятное впечатление и заявку на покупку. jQuery плагин Colorizer - изменим цвет к лучшему.
24 классных PHP библиотеки, о которых вы должны знать
Для PHP-разработчика, и времени лучшего не придумаешь чем сейчас. Ведь каждый день, появляются всё новые и новые вспомогательные элементы, такие, как например полезные библиотеки.
фильтры для очистки воды от примесей железа
Для PHP-разработчика, и времени лучшего не придумаешь чем сейчас. Ведь каждый день, появляются всё новые и новые вспомогательные элементы, такие, как например полезные библиотеки.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: