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.
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 Π·Π°Π³ΡΡΠ·ΠΊΠΈ
_
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ:
- ΠΡΠΎΡΡΠ°Ρ 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.