Авторизация







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

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











< Назад

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





< Назад

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

Выход


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

Главная >> 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
Опубликовал: Сергей Кашурин
Просмотров: 1803
Правила перепечатки

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

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

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


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

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

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

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

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

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

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

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