πŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

fit-modal is a simple, elegant, responsive, animated, highly customizable jQuery modal plugin for modern web design.

Modal

Documentation

jQuery.fit_modal

NPM version

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

Name Default Description
modal_frame .modal__frame Class of the general wrapper (background) of the modal window
modal_window .modal__window Modal window class
modal_body .modal__window__body Modal window body class
modal_title_class .modal__window__title Modal window title class
modal_title Modal window Modal window title
modal_content_block null Content wrapper class
frame_animation_speed 200 Background animation speed
win_animation_speed 400 Window animation speed
window_animation_type fade_in_top Window Animation Type
modal_close .modal__window__close Closure button class
fast_create true Generate modal window and wrap the content with it
init_custom_func null The user-defined function is activated when the initialization
active_custom_func null The user-defined function is activated when the window is turned on
close_custom_func null The user-defined function is activated when the window is closed
window_style {} Quickly set window styles
frame_style {} Quickly set background styles
on_ajax_mod false Enable Ajax Mod (Download external content)
ajax_mod {options} Ajax options
close_on_bg true Close window by clicking on background
responsive_mod {options} Adaptive Settings
fix_fw_el null Fixes bouncing fixed and absolute elements with 100% width (you need to add an element class)
fix_right_el null Correction of fixed and absolute elements with right positioning (you need to add an element class)
set_blur null blur background elements
ajax_mod
Name Default Description
href null Link to page or server
post_type 'GET' Request Type
data null What should I transfer to the server
error_message Server error or page not found. Error message
success_custom_func null Function on successful sending
error_custom_func null Function on error
responsive_mod
Name Default Description
media 0 Resolution below which includes adaptivity
on_custom null Function when enabling adaptability
off_custom null Function when the adaptivity is turned off
custom_fun null Function when changing the resolution
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

ΠžΠΏΡ†ΠΈΠΈ

Name Default Description
modal_frame .modal__frame Класс ΠΎΠ±Ρ‰Π΅ΠΉ ΠΎΠ±Π΅Ρ€Ρ‚ΠΊΠΈ (Ρ„ΠΎΠ½Π°) модального ΠΎΠΊΠ½Π°
modal_window .modal__window Класс модального окна
modal_body .modal__window__body Класс Ρ‚Π΅Π»Π° модального ΠΎΠΊΠ½Π°
modal_title_class .modal__window__title Класс заголовка модального окна
modal_title Modal window Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ модального ΠΎΠΊΠ½Π°
modal_content_block null Класс ΠΎΠ±Π΅Ρ€Ρ‚ΠΊΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°
frame_animation_speed 200 Π‘ΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Ρ„ΠΎΠ½Π°
win_animation_speed 400 Π‘ΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΎΠΊΠ½Π°
window_animation_type fade_in_top Π’ΠΈΠΏ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΎΠΊΠ½Π°
modal_close .modal__window__close Класс ΠΊΠ½ΠΎΠΏΠΊΠΈ закрытия
fast_create true Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ ΠΈ ΠΎΠ±Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΠΈΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚
init_custom_func null ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠ°Ρ функция активируСтся ΠΏΡ€ΠΈ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ
active_custom_func null ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠ°Ρ функция активируСтся ΠΏΡ€ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ ΠΎΠΊΠ½Π°
close_custom_func null ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠ°Ρ функция активируСтся ΠΏΡ€ΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ ΠΎΠΊΠ½Π°
window_style {} Быстро Π·Π°Π΄Π°Ρ‚ΡŒ стили ΠΎΠΊΠ½Π°
frame_style {} Быстро Π·Π°Π΄Π°Ρ‚ΡŒ стили Ρ„ΠΎΠ½Π°
on_ajax_mod false Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ajax ΠΌΠΎΠ΄ (Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° внСшнСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°)
ajax_mod {options} ΠžΠΏΡ†ΠΈΠΈ ajax
close_on_bg true Π—Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ ΠΊΠ»ΠΈΠΊΠΎΠΌ ΠΏΠΎ Ρ„ΠΎΠ½Ρƒ
responsive_mod {options} Настройки адаптивности
fix_fw_el null Π˜ΡΠΏΡ€Π°Π²Π»ΡΠ΅Ρ‚ ΠΏΡ€Ρ‹Π³Π°Π½ΠΈΠ΅ fixed элСмСнтов с 100% ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ (Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс элСмСнта)
fix_right_el null ΠšΠΎΡ€Ρ€Π΅ΠΊΡ†ΠΈΡ фиксированного ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ элСмСнты с ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ (Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс элСмСнта)
set_blur null Π Π°Π·Ρ‹ΠΌΡ‹Ρ‚ΠΈΠ΅ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… элСмСнтов (ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ класс элСмСнта)
ajax_mod
Name Default Description
href null Бсылка Π½Π° страницу ΠΈΠ»ΠΈ сСрвСр
post_type 'GET' Π’ΠΈΠΏ запроса
data null Π§Ρ‚ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚Π΄Π°Ρ‚ΡŒ Π½Π° сСрвСр
error_message Server error or page not found. Π‘ΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅ ΠΎΠ± ошибкС
success_custom_func null Ѐункция ΠΏΡ€ΠΈ ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠΉ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ΅
error_custom_func null Ѐункция ΠΏΡ€ΠΈ ошибкС
responsive_mod
Name Default Description
media 0 Π Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π½ΠΈΠΆΠ΅ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ
on_custom null Ѐункция ΠΏΡ€ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ адаптивности
off_custom null Ѐункция ΠΏΡ€ΠΈ Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ адаптивности
custom_fun null Ѐункция ΠΏΡ€ΠΈ смСнС Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ
Анимации
  • 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: [email protected]

ЛицСнзия

Β© Philipp Zhulev MIT License.


You May Also Like