Hello World!

jQuery responsive modal window + download ajax content

Demo

Click this button please!

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+

Plugin initialization

Without automatic generation

Description:
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.

Hello world!

I'm alive!

Ajax content download

Description:
In this way, you can upload content via ajax

Download document: test.html

Several modal windows

Description:
Multiple modal windows with one plugin connection.

Hello Friend!

How are you?

Are you here?

Switching between modal windows.

Description:
Way to switch between windows.
Your can play and come up with other ways to implement.

Do you like to click?

I knew it!

Responsive mod

Description:
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

Description:

frame_style - Background Style
window_style - Window Style

You can specify any css parameters.

So brighter?

Options and api

Attributes

Attr	Description
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)

Options

Option	Type	Default	Description
modal_frame	String	.modal__frame	Class of the general wrapper (background) of the modal window
modal_window	String	.modal__window	Modal window class
modal_body	String	.modal__window__body	Modal window body class
modal_title_class	String	.modal__window__title	Modal window title class
modal_title	String	Modal window	Modal window title
modal_content_block	String	null	Content wrapper class
frame_animation_speed	Number	300	Background animation speed
win_animation_speed	Number	300	Window animation speed
window_animation_type	String	fade_in_top	Window Animation Type
modal_close	String	.modal__window__close	Closure button class
fast_create	Boolean	true	Generate modal window and wrap the content with it
init_custom_func	Object	null	The user-defined function is activated when the initialization
active_custom_func	Object	null	The user-defined function is activated when the window is turned on
close_custom_func	Object	null	The user-defined function is activated when the window is closed
window_style	Array	{}	Quickly set window styles
frame_style	Array	{}	Quickly set background styles
on_ajax_mod	Boolean	false	Enable Ajax Mod (Download external content)
ajax_mod	Array	{options}	Ajax options
close_on_bg	Boolean	true	Close window by clicking on background
responsive_mod	Array	{options}	Adaptive Settings
fix_fw_el	String	null	Fixes bouncing fixed and absolute elements with 100% width (you need to add an element class)
fix_right_el	String	null	Correction of fixed and absolute elements with right positioning (you need to add an element class)
set_blur	String	null	blur background elements

ajax_mod

Option	Type	Default	Description
href	String	null	Link to page or server
post_type	'GET'	.modal__window	Request Type
data	Array	null	What should I transfer to the server
error_message	String	Server error or page not found.	Error message
success_custom_func	Object	null	Function on successful sending
error_custom_func	Object	null	Function on error

responsive_mod

Option	Type	Default	Description
media	Number	0	Resolution below which includes adaptivity
on_custom	Object	null	Function when enabling adaptability
off_custom	Object	null	Function when the adaptivity is turned off
custom_fun	Object	null	Function when changing the resolution

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

Animations

fade_in
fade_in_top
fade_in_down
fade_in_left
fade_in_right
zoom_in
rotate

Description:
Demonstration of the event

Look at the console!

Custom function and reverse event

Description:
Write something and press enter

Reverse event:

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

License

MIT License.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Created by Philipp Zhulev Filippja@gmail.com

Watch Star

Like the plug-in? you can thank the author!