Описание

Вступление

Сегодня меня друг попросил объяснить, как подключить модальное окно с помощью плагина arcticModal, так как на сайте разработчика документация написана не совсем понятно.
 

ArticModal

 


 
Преимущество данного плагина в том, что при открытии длинного модального окна и его прокрутке - страница сайта фиксируется и не прокручивается в месте с самим модальным окном в отличии от остальных плагинов.
Центрирование окна по средине экрана.
Поддержка 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>
 
Исходник с офсайта:
jquery.arcticmodal-0.3.zip Загрузок: 187 [6.47 Kb]
Исходник с GitHub:
arcticModal-master.zip Загрузок: 196 [48.95 Kb]
 
У кого есть вопросы, пишите...

Сайт разработчика: arcticlab.ru
На GitHub: github.com

Demo

Комментарии 6

  1. 0

    imha

    Как удалить толстую границу у всплывающего окна? Css не помогает...
    24.02.2019 03:08
  2. 0

    Ден

    Отвечу по недовольству "Одновременное отображение нескольких окон с накладкой друг на друга" зачем это надо.
    Допустим если данное окно используется в качестве элемента каталога, вы напротив продукции ставите "обратная связь" то окно обратной связи, перекрывающее основное, в таком случае как нельзя кстати.
    Отличный скрипт, от души сделали!
    16.07.2017 05:53
    1. 0

      Kylaksizov

      Это не мой плагин. Я просто описал как его установить и настроить.
      16.07.2017 07:28
  3. 0

    evgennova

    Прикольная штука.
    Насколько, по скорости и качеству можно сравнить с highslide?
    Возможно ли его применять вместо highslide в скрипте

    function SendBuy(store_id){hs.htmlExpand(null,{src:'sendbuy.php?store_
id='+store_id+'&'+phpsessid,width:300,height:217,object
Type:'iframe',outlineType:'rounded-white',wrapperClassN
ame:'draggable-header',headingText:''})}
    25.01.2016 20:53
    1. 0

      Kylaksizov

      Не знаю, мне кажется, что arcticModal лучше.
      25.01.2016 20:56
  4. 0

    grifosh

    Очень полезная и удобная штука. Жаль..ее используют совсем немногие(
    16.01.2015 13:37
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Похожие товары