Описание
Вступление
Сегодня меня друг попросил объяснить, как подключить модальное окно с помощью плагина arcticModal, так как на сайте разработчика документация написана не совсем понятно.
Преимущество данного плагина в том, что при открытии длинного модального окна и его прокрутке - страница сайта фиксируется и не прокручивается в месте с самим модальным окном в отличии от остальных плагинов.
Центрирование окна по средине экрана.
Поддержка Ajax.
Минусы
Модальные окна не адаптивны в данной версии.
Возможности
Одновременное отображение нескольких окон.
Я считаю эту возможность неактуальной. Минус в том, что несколько окон накладываются друг на друга и после закрытия первого, второе остаётся на месте. Думаю было бы полезно, если при открытии второго, первое отъезжало бы выше, что бы было видно два окна сразу. А так одно окно поверх второго - это незачем. В таком случае сделали бы, что бы первое закрывалось.
Ajax загрузка содержимого в модальное окно перед его открытием.
Прокрутка содержимого сайта остаётся на месте.
Закрытие окна при нажатии Esc.
Установка
Подключаем библиотеку Jquery и сам скрипт плагина.
<script data-src="//yandex.st/jquery/1.9.1/jquery.min.js"></script>
<!-- arcticModal -->
<script src="js/arcticmodal/jquery.arcticmodal-0.3.min.js"></script>
<link rel="stylesheet" href="js/arcticmodal/jquery.arcticmodal-0.3.css">
<!-- arcticModal theme -->
<link rel="stylesheet" href="js/arcticmodal/themes/simple.css">
Html
<div style="display: none;">
<div class="box-modal" id="exampleModal">
<div class="box-modal_close arcticmodal-close">закрыть</div>
Пример модального окна
</div>
</div>
И сам скрипт
<script>
$(function(){
$('#exampleModal').arcticmodal();
});
</script>
У кого есть вопросы, пишите...
Demo
Комментарии 6
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.