这是一款效果非常炫酷的jQuery响应式自适应模态窗口特效插件。当某个特定的链接被触发时，模态窗口被旋转放大到指定位置。看似很简单，但实际上有很多细节问题需要处理。
在这里使用克隆元素的方法来制作模态窗口，当模态窗口关闭时，插件将销毁克隆元素，然后将原来的元素显示出来。
HTML结构
html结构中使用html5的自定义data属性，不需要调用任何的JavaScript，模态窗口插件将自动侦测所有元素，当发现data-toggle的值为adaptive-modal时，将自动为其创建一个模态窗口。data-title中的内容将被用于模态窗口的内容描述。data-title支持使用html标签。
<body>
..
<a href="#" data-toggle="adaptive-modal" data-title="...">...</a>
..
</body>
高级应用
在实际应用中，可以通过各种定制来生成不同的模态窗口。下面是几个不同模态窗口的例子：
显示已经存在的内容
通过a标签的href实现指向特定的ID，你能够在模态窗口中显示特定内容，而不是data-title中的内容。
<body>
..
<a href="#form" data-toggle="adaptive-modal">...</a>
<form id="form">
..
</form>
..
</body>
显示远程内容
该模态窗口插件支持AJAX远程调用，你不需要编写javascript关于ajax的代码，你需要做的仅仅是在href中指定AJAX远程调用的URL地址和设置data-remote属性为true。
<body>
..
<a href="http://www.remote-ajax-url.com" data-type=".." data-datatype=".." data-remote="true" data-toggle="adaptive-modal">...</a>
..
</body>
你也可以通过data-type和data-datatype实现来设置你自己的AJAX类型和datatype。类型默认为GET，datatype默认为HTML。
为每个模态窗口定义class名称
你也可以通过data-am-custom-class自定义模态窗口的class名称，以便于修改模态窗口的CLASS样式。
<body>
..
<a href="#" data-toggle="adaptive-modal" data-title="..." data-am-custom-class="custom-class-name">...</a>
..
</body>
自定义模态窗口的背景颜色
你可以通过data-am-custom-bgcolor属性来定义模态窗口的背景颜色。
<body>
..
<a href="#" data-toggle="adaptive-modal" data-title="..." data-am-custom-bgcolor="#000">...</a>
..
</body>
更多可选参数
下面让我们通过JavaScript的调用来说明更多的可用参数。如果你想定义一个全局选项，而不是依靠HTML标记，你可以通过jQuery初始化插件来完成：
$(".am-remote-link").adaptiveModal({
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"
})
elementAnimateTime：这个参数定义模态窗口打开或关闭的时间，单位毫秒，默认值为100。
customBgColor：这个参数和data-am-custom-bgcolor属性的功能一样，用于定义背景颜色。这个参数可以是HEX, RGB, RGBA。默认值为#333333。
remoteUrl：这个参数定义远程调用的URL并设置它为true，默认值为FALSE。
elementAnimateIn：要使用这个参数，你需啊哟在head引入一个CSS3 animation库，如Animate.css。通过Animate.css的class名称，你可以为模态窗口定义各种动画类型。默认值是内置的scaleShow。
beforeAnimate：这个参数是模态窗口动画开始前的一个回调函数。可用参数是el返回一个jQuery对象和动画状态。例如：当模态窗口打开时将返回“open”。
afterAnimate：这个参数是模态窗口动画结束时的一个回调函数。可用参数是el返回一个jQuery对象和动画状态。例如：当模态窗口关闭时将返回“close”。
其它的type, async, cache, complete, error, global, headers, statusCode, success, 和 dataType和默认的jQuery AJAX参数是一致的，你可以在这里得到更多关于它们的信息。
回调(Callbacks)
我们在插件中添加了一些回调函数，以便于你能在自己的项目中扩展它们。下面列举了一些回调函数：
beforeAnimate: function(el, status)
这个回调函数在模态窗口动画开始前被调用。el参数返回一个jQuery对象和动画的当前状态。例如：模态窗口打开时返回“open”，模态窗口关闭时返回“close”。
$(".am-remote-link").adaptiveModal({
beforeAnimate: function(el, status) {
...
}
});
afterAnimation: function(el,status)
这个回调函数在模态窗口动画结束被调用。el参数返回一个jQuery对象和动画的当前状态。例如：模态窗口打开时返回“open”，模态窗口关闭时返回“close”。
$(".am-remote-link").adaptiveModal({
afterAnimate: function(el, status) {
...
}
});
公共方法(Public Methods)
你也可以通过公共方法来触发模态窗口的动画。
$.fn.openModal()
你可以通过这个方法来打开模态窗口：
$(".am-remote-link").openModal()
$.fn.closeModal()
你可以通过这个方法来关闭模态窗口：
$(".am-remote-link").closeModal()
