Create A Flipping Modal Window with jQuery and CSS3 - Adaptive Modal

Adaptive Modal is another jQuery modal/lightbox plugin for creating a cool modal window with a cool flip animation that can be morphed from any Html elements like existing containers, inline elements and JSON data. Works nicely on modern browsers which support CSS3 properties including transitions, transforms and keyframes. License under the Attribution-ShareAlike 4.0 International.

How to use it:

1. Include jQuery library and the plugin's javascript & CSS in your Html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.adaptive-modal.js"></script>
<link href="adaptive-modal.css" rel="stylesheet" type="text/css">

2. Create a link with data-toggle="adaptive-modal" to toggle a modal window from a existing container with CSS id 'demo'.

<a href="#demo" data-toggle="adaptive-modal">Click me!</a>

<div id="form">
Your content goes here
</div>

3. Create a modal window with custom styles from inline elements by adding data-* attributes in the a tag.

<a href="#" data-toggle="adaptive-modal" 
data-title=" Modal Body " 
data-am-custom-class="customStyle"
>Custom Styles</a>

4. Create a modal window that loads data from a remote source.

<a href="demo.json" 
data-remote="true" 
data-datatype="json" 
data-am-custom-class="customStyle"
>Open Remote Modal</a>

5. Available options.

elementAnimateTime: 100,
customBgColor: "#333",
remoteUrl: false,
elementAnimateIn: "scaleShow",
elementAnimateOut: "scaleHide",
beforeAnimate: function(el, status) {},
afterAnimate: function(el, status) {},
/* Deafult Ajax Parameters  */
type: "GET",
async: true,
complete: function(xhr, text) {},
cache: true,
error: function(xhr, text, e) {},
global: true,
headers: {},
statusCode: {},
success: function(data, text, xhr) {},
dataType: "html"

---

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