Наша группа по DLE в Telegram Любой товар на сайте можно получить бесплатно
ArticModal

Модальные окна с плагином arcticModal


Рассмотрим плагин правильных модальных окон.
От разработчика Kylaksizov
  • Описание
  • Скриншоты
  • Обновления
  • Теги
  • ?
  • Комментарии 6

Вступление

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

ArticModal

 


 
Преимущество данного плагина в том, что при открытии длинного модального окна и его прокрутке - страница сайта фиксируется и не прокручивается в месте с самим модальным окном в отличии от остальных плагинов.
Центрирование окна по средине экрана.
Поддержка Ajax.
 
Минусы
Модальные окна не адаптивны в данной версии.

Возможности

Одновременное отображение нескольких окон.
Я считаю эту возможность неактуальной. Минус в том, что несколько окон накладываются друг на друга и после закрытия первого, второе остаётся на месте. Думаю было бы полезно, если при открытии второго, первое отъезжало бы выше, что бы было видно два окна сразу. А так одно окно поверх второго - это незачем. В таком случае сделали бы, что бы первое закрывалось.
Ajax загрузка содержимого в модальное окно перед его открытием.
Прокрутка содержимого сайта остаётся на месте.
Закрытие окна при нажатии Esc. 
 

Установка

Подключаем библиотеку Jquery и сам скрипт плагина.
<script 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 Загрузок: 147 [6,47 Kb]
Исходник с GitHub:
arcticModal-master.zip Загрузок: 167 [48,95 Kb]
 
У кого есть вопросы, пишите...

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

Demo

Добавить комментарий
  1. 0

    imha

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

    Ден

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

      Kylaksizov

      Это не мой плагин. Я просто описал как его установить и настроить.
      16 июля 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 января 2016 20:53 Ответить
    1. 0

      Kylaksizov

      Не знаю, мне кажется, что arcticModal лучше.
      25 января 2016 20:56 Ответить
  4. 0

    grifosh

    Очень полезная и удобная штука. Жаль..ее используют совсем немногие(
    16 января 2015 13:37 Ответить

Оставить комментарий

В корзине: 0 шт.

на сумму: 0

Всего: 0

Оформить заказ Очистить корзину