Elegant Responsive jQuery Modal Window Plugin - fit-modal

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

Features:

• Easy to implement.
• Fade, zoom, and rotate animations.
• Supports both static and ajax content.
• Lots of configuration options and API.

Basic usage:

1. To use this plugin, first you need to include jQuery library and other required resources on the html page.

<link href="jquery.fit_modal.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.fit_modal.js"></script>

2. Create your own content to be loaded into the modal window.

<div class="content__wrap">Hello world!</div>

3. Create a trigger button with the following data attributes to launch the modal window.

• data-title: Modal title
• data-win-animation: Animation type: "fade_in", "fade_in_top", "fade_in_down", "fade_in_left", "fade_in_right", "zoom_in", "rotate"
• data-content_block: Container element that holds your modal content

<button class="demo" 
    data-title="Modal Title" 
    data-win-animation="fade_in_top" 
    data-content_block=".content__wrap">
    Basic modal
</button>

4. Initialize the modal by calling the function on the trigger button.

$('.demo').fit_modal();

5. To load an external file into the modal window, follow these steps:

<button class="ajax" data-href="ajax.html">AJAX Modal</button>
<!--content block-->
<div class="content__wrap_ajax"></div>

$('.ajax').fit_modal({
  on_ajax_mod  :  true,
  modal_content_block : '.content__wrap_ajax',
  modal_title : 'AJAX Modal',
  window_animation_type  : 'fade_in_top'
});

6. All default customization options for the modal plugin.

$('.trigger-button').fit_modal({

  // default CSS classes
  modal_frame             :  '.modal__frame',
  modal_window            :  '.modal__window',
  modal_body              :  '.modal__window__body',
  modal_title_class       :  '.modal__window__title', 

  // modal title
  modal_title             :  'Modal window',

  // modal container
  modal_content_block     :  null,

  // animation speed in milliseconds
  frame_animation_speed   :  200,
  win_animation_speed     :  500, 

  // "fade_in", "fade_in_top", "fade_in_down", "fade_in_left", "fade_in_right", "zoom_in", "rotate"
  window_animation_type   : 'fade_in_top',

  // CSS selector of close button
  modal_close             : '.modal__window__close',

  // auto generates modal window
  fast_create             : true,

  // callback functions
  init_custom_func        : null, 
  active_custom_func      : null,
  close_custom_func       : null,

  // additional CSS styles
  window_style            : {},
  frame_style             : {},

  // enable ajax loading
  on_ajax_mod             : false, 

  // ajax options
  ajax_mod                : { 
      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
  },

  // close modal on click background
  close_on_bg   : true, //close modal on background

  // responsiveness options
  responsive_mod          : {  
      media : 0, 
      on_custom : null, 
      off_custom : null, 
      custom_func : null 
  },

  // CSS classes
  fix_fw_el    : null, 
  fix_right_el : null,

  // blur background elements
  set_blur     : null

});

7. Events.

var myModal = $('.trigger-button').fit_modal();

myModal.on('fm.onActive', function() {
  // on active
});

myModal.on('fm.onWindow', function() {
  // when the modal window created
});

myModal.on('fm.onClose', function() {
  // on close
});

myModal.on('fm.onCloseFrame', function() {
  // when the modal window is completely closed
});

myModal.on('fm.onResponsive', function() {
  // when responsiveness mod is enabled
});

myModal.on('fm.offResponsive', function() {
  // when responsiveness mod is disabled
});

---

This awesome jQuery plugin is developed by PhilippZhulev. For more Advanced Usages, please check the demo page or visit the official website.