这是一款效果非常炫酷的jQuery响应式自适应模态窗口特效插件。当某个特定的链接被触发时,模态窗口被旋转放大到指定位置。看似很简单,但实际上有很多细节问题需要处理。
在这里使用克隆元素的方法来制作模态窗口,当模态窗口关闭时,插件将销毁克隆元素,然后将原来的元素显示出来。
插件不支持IE9一下浏览器,请使用高版本
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()