这是一款效果非常炫酷的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()