Pull to refresh

arcticModal — jQuery-плагин для модальных окон

Website developmentJavaScriptjQuery
Для реализации модальных окон и диалогов существует немало плагинов jQuery. Перепробовав многие из них, я не нашёл ни одного, который бы достаточно просто и, что важно, правильно решал поставленную задачу.

Недавно SamDark писал о правильных модальных окнах и представил сообществу плагин The Modal. Полностью согласен с его виденьем модальных окон, но в представленном плагине не хватало функционала. У меня уже давно из проекта в проект кочевали наработки по этой же теме, вот решил тоже оформить их в виде плагина.

Основные возможности


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


Использование плагина


Подключаем jQuery и плагин jquery.arcticmodal:

<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 class="b-modal" id="exampleModal">
    <div class="b-modal_close arcticmodal-close">X</div>
    Пример модального окна
</div>

JavaScript:

$('#exampleModal').arcticmodal();


Документация, примеры и скачать тут

Конструктивная критика очень приветствуется :)

UPD Репозиторий на GitHub
Tags:модальные окнаjquery pluginsjquery uijquery
Hubs: Website development JavaScript jQuery
Total votes 46: ↑39 and ↓7+32
Views58K

Popular right now

Top of the last 24 hours