Loading...

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

Вступление

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

 


 
Преимущество данного плагина в том, что при открытии длинного модального окна и его прокрутке - страница сайта фиксируется и не прокручивается в месте с самим модальным окном в отличии от остальных плагинов.
Центрирование окна по средине экрана.
Поддержка 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 [6,47 Kb] (cкачиваний: 91)
Исходник с GitHub: Скачать файл: arcticModal-master.zip [48,95 Kb] (cкачиваний: 125)
 
У кого есть вопросы, пишите...

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

Demo


Автор: Kylaksizov
Поделиться:

Комментарии ( 5 )


  1. avatar_https://kylaksizov.ru/uploads/fotos/foto_6.png
    grifosh 16 января 2015 13:37
    • 0
    Ответить
    Очень полезная и удобная штука. Жаль..ее используют совсем немногие(
  2. avatar_http://kylaksizov.ru/uploads/fotos/foto_160.png
    evgennova 25 января 2016 20:53
    • 0
    Ответить
    Прикольная штука.
    Насколько, по скорости и качеству можно сравнить с 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:''})}
    1. avatar_http://kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 25 января 2016 20:56
      • 0
      Ответить
      Не знаю, мне кажется, что arcticModal лучше.
  3. avatar_/templates/Kylaksizov/dleimages/noavatar.png
    Ден 16 июля 2017 05:53
    • 0
    Ответить
    Отвечу по недовольству "Одновременное отображение нескольких окон с накладкой друг на друга" зачем это надо.
    Допустим если данное окно используется в качестве элемента каталога, вы напротив продукции ставите "обратная связь" то окно обратной связи, перекрывающее основное, в таком случае как нельзя кстати.
    Отличный скрипт, от души сделали!
    1. avatar_http://kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 16 июля 2017 07:28
      • 0
      Ответить
      Это не мой плагин. Я просто описал как его установить и настроить.
    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

В корзине: 0 шт. 0 руб.
Отключите расширение AdBlock на нашем сайте!

Собеседники

Переписка

Нименование Количество Цена / 1 шт.
Всего: 0 руб.