Для реализации модальных окон и диалогов существует немало плагинов 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();
Документация, примеры и скачать тут
Конструктивная критика очень приветствуется :)
Автор: NikoX
