jQuery.fit_modal

EN | RU

ENGLISH

_

jQuery responsive modal window + download ajax content

Description

fit_modal - is an adaptive modal window for content that has a large amount of settings and the ability to download content via ajax.

DEMO

Benefits

• Simple html structure
• Three types of implementation in html
• 33 options for full plug-in configuration
• 6 events + 4 reverse events + custom functions
• Wide range of applications
• Multiple Animation Types
• Easy customization of ajax capabilities

Get started

Node package manager:

npm install fit_modal

Connect:

• jquery.fit_modal.css
• jquery.fit_modal.js

or

• jquery.fit_modal.min.css
• jquery.fit_modal.min.js from the folder dist

Plugin requires:

• normalize.css or reset.css
• jQuery 1.8.3+

default initialization

<!--Activation button-->
<button class="btn__active-modal" 
    data-title="Feedback form" 
    data-win-animation="fade_in_top" 
    data-content_block=".content__wrap">
    Open modal
</button>

<!--content block-->
<div class="content__wrap">Hello world!</div>

<script>
    $(window).ready(function () {
        //Plugin init
        $('.btn__active-modal').fit_modal();
        
    });
</script>

Attributes:

• data-title - Modal window title
• data-win-animation - Window Animation Type
• data-content_block - Content wrapper class
• data-href - Link to page or server (ajax)

Attributes take precedence over options!

Without automatic generation

<!--Activation button-->
<button class="btn__demo_0" data-content_block=".content__wrap_1">
  Open modal №1
</button>

<button class=".btn__demo_0_1" data-content_block=".content__wrap_2">
  Open modal №2
</button>

<!--content block-->
<div class="modal__frame">
  <div class="modal__window">
    <div class="modal__window__header">
      <div class="modal__window__close"></div>
      <div class="modal__window__title"></div>
    </div>
    <div class="modal__window__body">
      <div class="content__wrap_1">Hello world!</div>
      <div class="content__wrap_2">I'm alive!</div>
    </div>
  </div>
</div>

<!--Plugin init-->
<script>
  $(window).ready(function () {
    $('.btn__demo_0').fit_modal({
      fast_create : false,
      window_animation_type   : 'zoom_in',
      frame_animation_speed   :  300,
      modal_title  :  'Modal 1!',
    });

    $('.btn__demo_0_1').fit_modal({
      fast_create : false,
      modal_title  :  "Modal 2!",
    });
  });
</script>

This activation option allows you to run several types of content with different parameters in one modal window, which can be useful in some situations and significantly reduces the amount of html code on the page.

_

Using this implementation method, you can use only one type of animation for all events.

Ajax content download

<!--Activation button-->

<button class="btn__active-modal" data-href="test.html">
   View document
</button>


<!--content block-->
<div class="content__wrap_ajax"></div>

<script>
   $(window).ready(function () {
       $('.btn__active-modal').fit_modal({
           on_ajax_mod  :  true,
           modal_content_block : 'content__wrap_ajax',
           modal_title : 'View document',
           window_animation_type  : 'fade_in_top'
       });
   });
</script>

In this way, you can upload content via ajax

ajax_mod settings

    $('element').fit_modal({
        on_ajax_mod  :  true,
        ajax_mod                : { //ajax options
            href      :  null, //url
            post_type :  'GET', //action type
            data      :  null, //data type
            error_message : "Server error or page not found.", //error message
            success_custom_func : null, //user function
            error_custom_func : null //user function
        },
    });

Responsive mod

    $('element').fit_modal({
        responsive_mod : {  
            media : 1024, 
            on_custom : null, 
            off_custom : null, 
            custom_func : null 
        }
    });

The media parameter specifies with which permission to run adaptivity (768px by default). 0 - Adaptivity is disabled. The remaining parameters are user-defined functions.

Fast styling

• frame_style - Background Style
• window_style - Window Style

    $('element').fit_modal({
           window_style : {
               "borderRadius" :  "15px",
               "background" : "rgba(255, 255, 0, 0.68);"
           },
           frame_style : {
               "background" : "rgba(110, 117, 142, 0.5)"
           }, 
    });

You can specify any css parameters.

Options

ajax_mod

responsive_mod

Animations

• fade_in
• fade_in_top
• fade_in_down
• fade_in_left
• fade_in_right
• zoom_in
• rotate

Events

• fm.onActive - When the modal window is activated
• fm.onWindow - When the content area of the modal window appears
• fm.onClose - When the modal window is closed
• fm.onCloseFrame - When the modal window is completely closed
• fm.onResponsive - When adaptivity is enabled
• fm.offResponsive - When the adaptivity is turned off

demonstration of the event

   var this_modal = $('element').fit_modal();

   this_modal.on('fm.onActive', function() {
       console.log('wow!')
   });

Custom function and reverse event

html

<form action="" class="test__form">
    <input type="text" class="test__input">
</form>
<div class="no_elm"></div>


<div class="demo-modal__us-func"></div>

javaScript

    var user_modal = $('.no_elm').fit_modal({
        modal_content_block : '.demo-modal__us-func',
        modal_title : 'User modal',
        window_animation_type  : 'fade_in_top',
        active_custom_func : function (el, fn) {
            $(this.modal_title_class).html(this.modal_title + ' - ' + fn.idClass.slice(1));
            $(this.modal_content_block).html($('.test__input').val());
            console.log(fn);
        }
    });
    
    $('.test__form').submit(function (e) {
        e.preventDefault();
        user_modal.trigger('on.modal.active');
    });

An example of work can be seen in the demo

• on.modal.active - modal activation
• on.modal.close - closing modal
• on.win.active - window activation
• on.win.close - closing window

Plans for the development of the plugin

• Ability to switch between modal windows (scrolling) with the built-in interface
• Built-in image gallery mod

Build

__dist     -->  Plug-in files
__dist_src -->  Plug-in sources
__docs     -->  Demo page files
______Css           -->  Styles  (minify)
______fonts         -->  Fonts     
______Js            -->  javaScript (minify)
______img           -->  Images
__src      --> Demo page sources
______components    -->  Components
______js            -->  javaScript (not minify)
______css           -->  css (not minify)
______nib           -->  Functions for stylus
______plugins       -->  Plu-ins

License

© Philipp Zhulev MIT License.

RUSSIAN

_

Адаптивное модальное окно для контента с возможностью ajax загрузки

DEMO

_

Возможности:

• Простая html структура
• Три типа реализации в html:
  • только блок контента, который автоматически обернется нужными элементами,
  • полный html модального окна,
  • загрузить контент через ajax (с использованием любого из двух предыдущих вариантов)
• 33 опции для полной настройки плагина
• 6 событий + 4 обратных события + пользовательские функции
• Широкий спектр применения (по дефолту активироваться кликом по элементу, но также с легкостью можно повесить активацию на любое другое событие)
• Несколько типов анимации появления а так же легкое создание и присвоение своих анимаций через css
• Пользовательская настройка адаптивности
• Простая настройка ajax возможностей
• Подходит для BEM структуры проекта

Быстрый старт:

Node package manager:

npm install fit_modal

Подключаем:

• jquery.fit_modal.css
• jquery.fit_modal.js

или

• jquery.fit_modal.min.css
• jquery.fit_modal.min.js

из папки dist

Для нормальной работы плагина требуется:

• normalize.css или reset.css
• jQuery 1.8.3+

Тип 1:

<!--Activation button-->
<button class="btn__active-modal" 
    data-title="Feedback form" 
    data-win-animation="fade_in_top" 
    data-content_block=".content__wrap">
    Open modal
</button>

<!--content block-->
<div class="content__wrap">Hello world!</div>

<script>
    $(window).ready(function () {
        //Plugin init
        $('.btn__active-modal').fit_modal();
        
    });
</script>

Если у вас на странице несколько типов контента, то каждый будет отдельным модальным окном

Аттрибуты:

• data-title - Заголовок модального окна
• data-win-animation - Анимация появления окна (по умолчанию: fade_in)
• data-content_block - указывает класс обертки контента
• data-href - если включен ajax мод, сюда пишется ссылка на документ или сервер, откуда нужно брать контент

Атрибуты имеют приоритет над опциями!

Тип 2:

<!--Activation button-->
<button class="btn__demo_0" data-content_block=".content__wrap_1">
  Open modal №1
</button>

<button class=".btn__demo_0_1" data-content_block=".content__wrap_2">
  Open modal №2
</button>

<!--content block-->
<div class="modal__frame">
  <div class="modal__window">
    <div class="modal__window__header">
      <div class="modal__window__close"></div>
      <div class="modal__window__title"></div>
    </div>
    <div class="modal__window__body">
      <div class="content__wrap_1">Hello world!</div>
      <div class="content__wrap_2">I'm alive!</div>
    </div>
  </div>
</div>

<!--Plugin init-->
<script>
  $(window).ready(function () {
    $('.btn__demo_0').fit_modal({
      fast_create : false,
      window_animation_type   : 'zoom_in',
      frame_animation_speed   :  300,
      modal_title  :  'Modal 1!',
    });

    $('.btn__demo_0_1').fit_modal({
      fast_create : false,
      modal_title  :  "Modal 2!",
    });
  });
</script>
<!--Plugin init-->
<script>
    $(window).ready(function () {
        $('.btn__active-modal_1').fit_modal({
            fast_create : false,
            modal_title  :  'Hello world!',
        });

        $('.btn__active-modal_2').fit_modal({
            fast_create : false,
            window_animation_type   : 'fade_in_left',
            win_animation_speed     :  300, 
            modal_title  :  "I'm alive!"
        });
    });
</script>

Такой вариант активации позволяет запускать в одном модальном окне несколько типов контента с разными параметрами, что может быть полезно в некоторых ситуациях и существенно сокращает количество html кода на странице

Тип 3:

<!--Activation button-->
<button class="btn__active-modal" data-href="test.html">
    View document
</button>

<!--content block-->
<div class="content__wrap_ajax"></div>

<script>
    $(window).ready(function () {
        
        //Plugin init
        $('.btn__active-modal').fit_modal({
            on_ajax_mod  :  true,
            modal_content_block : 'content__wrap_ajax',
            modal_title : 'View document',
            window_animation_type  : 'fade_in_top'
        });
    });
</script>

Таким способом вы можете подгрузить контент через ajax

У ajax мода есть свои настройки:

    $('element').fit_modal({
        on_ajax_mod  :  true,
        ajax_mod                : { //ajax options
            href      :  null, //url
            post_type :  'GET', //action type
            data      :  null, //data type
            error_message : "Server error or page not found.", //error message
            success_custom_func : null, //user function
            error_custom_func : null //user function
        },
    });

Адаптивность

    $('element').fit_modal({
        responsive_mod          : {  //responsive
            media : 0, //responsive resolution
            on_custom : null, //user function
            off_custom : null, //user function
            custom_func : null //user function
        }
    });

В параметре media указывается с какого разрешения запускать адаптивность (по умолчанию 768px). 0 - адаптивность отключена. Остальные параметры это пользовательские функции.

Быстрая стилизация

    $('element').fit_modal({
           window_style : {
               "background" : "rgba(110, 117, 142, 0.5)"
           },
           frame_style : {
               "borderRadius" :  "15px"
           }, 
    });

• frame_style - Стиль фона
• window_style - Стиль окна

Можно задать любые параметры css.

API

Опции

ajax_mod

responsive_mod

Анимации

• fade_in - Плавное появление
• fade_in_top - Плавное появление сверху
• fade_in_down - Плавное появление снизу
• fade_in_left - Плавное появление слева
• fade_in_right - Плавное появление справа
• zoom_in - Плавное увеличение
• rotate - закручивание

События

• fm.onActive - При Активации модального окна
• fm.onWindow - При Появлении контентной области модального окна
• fm.onClose - При закрытии модального окна
• fm.onCloseFrame - При полном закрытии модального окна
• fm.onResponsive - При включении адаптивности
• fm.offResponsive - При выключении адаптивности

   var this_modal = $('element').fit_modal();

   this_modal.on('fm.onActive', function() {
       console.log('wow!')
   });

Пользовательская функция

     $('element').fit_modal({
        active_custom_func : function (el, fm) {
            console.log(el);
            $(this.modal_content_block).html('ID your modal window' + fm.idClass.slice(1));
        }
     });

В примере мы вывели в консоль объект на который был произведен клик и произвольно сгенерированный индикатор модального окна в область контента.

Обратное событие и пользовательская функция

html

<form action="" class="test__form">
    <input type="text" class="test__input">
</form>
<div class="no_elm"></div>


<div class="demo-modal__us-func"></div>

javaScript

    var user_modal = $('.no_elm').fit_modal({
        modal_content_block : '.demo-modal__us-func',
        modal_title : 'User modal',
        window_animation_type  : 'fade_in_top',
        active_custom_func : function (el, fn) {
            $(this.modal_title_class).html(this.modal_title + ' - ' + fn.idClass.slice(1));
            $(this.modal_content_block).html($('.test__input').val());
            console.log(fn);
        }
    });
    
    $('.test__form').submit(function (e) {
        e.preventDefault();
        user_modal.trigger('on.modal.active');
    });

Пример работы можно посмотреть в демо

Обратное события

• on.modal.active - активация модального окна
• on.modal.close - закрытие модального окна
• on.win.active - активация окна
• on.win.close - Закрытие окна

Планы по развитию плагина

--

• Возможность переключения между модальными окнами (пролистывание) при помощи встроенного интерфейса
• Встроенный мод галереи изображений

Build

__dist     -->  Файлы плагина
__dist_src -->  Исходники плагина
__docs     -->  Файлы демо страницы
______Css           -->  Стили  (minify)
______fonts         -->  Шрифты     
______Js            -->  javaScript (minify)
______img           -->  Изображения
__src      --> Исходники демо страницы
______components    -->  Компоненты
______js            -->  javaScript (not minify)
______css           -->  css (not minify)
______nib           -->  функции для stylus
______plugins       -->  Плагины

По всем вопросам пишите на e-mail: Filippja@gmail.com

Лицензия

© Philipp Zhulev MIT License.