Performant Mobile-friendly jQuery Modal Plugin - MultiModal

MultiModal is a lightweight, flexible jQuery plugin used to create beautiful, performant modal windows & dialog boxes for both desktop and mobile.

Key features:

• Uses GSAP's Tweenmax.js for fast, high-performance html5 animations.
• Multiple modal windows on one page.
• Custom actions buttons. Great for confirmation dialog.
• AJAX content supported.

How to use it:

1. Load the needed jQuery library and Tweenmax.js in the webpage.

<script src="/path/to/jquery-3.0.0.slim.min.js"></script>
<script src="/path/to/TweenMax.min.js"></script>

2. Load the jQuery MultiModal plugin's script and a theme CSS of your choice in the webpage.

<script src="dist/multi-modal.js"></script>
<link href="multi-modal-classic.css" rel="stylesheet">
<!-- OR -->
<link href="multi-modal-modern.css" rel="stylesheet">

3. Create a new MultiModal object and pass the options as follows:

var modal = new MultiModal({

    // modal title
    title: 'Multi Modal',

    // fullscreen mode
    fullScreen: true,

    // shows close button
    closeButton: true
    
});

4. The JavaScript to show the modal window with custom content.

modal.new({
  
  // modal content
  content: 'Do you like it?',

  // custom buttons
  buttons: {
    primary: {
      value: 'Okey',
      href: '',
      className: 'button button--primary'
    },
    secondary: {
      value: 'Cancel',
      className: 'button button--secondary',
      closeOnClick: true
    }
  }
  
});

5. The JavaScript to load an external html file into the modal window via AJAX.

modal.new({
  remote: {
    url: 'ajax.html',
    data: { name: 'jquery', url: '#' }
  }
});

6. All default options.

modal.new({
  
  // modal title
  title: 'Modal Title'

  // modal content
  content: 'Do you like it?',

  // class(es) of the modal
  className: '',
  classList: ''

  // only visible for mobile
  closeButton: 'mobile',

  // fullscreen mode
  fullScreen: false,

  // close the modal by clicking on the background
  allowBackdropClose: true,

  // custom buttons
  buttons: {
    primary: {
      value: '', // The value of the button
      href: '', // The href of the button
      className: '' // The class of the button
    },
    secondary: {
      value: '',
      className: '',
      closeOnClick: true // If true clicking on the button will close the modal
    }
  }

});

---

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