jQuery自适应窗口特效插件

PetitQ 对话框/Tips 2018-10-26 1.42K 0 0

这是一款效果非常炫酷的 jQuery 响应式自适应模态窗口特效插件，该模态窗口插件共有 5 种特效，当点击特定链接后，模态窗口会后逐渐放大、翻转的动画效果，非常的酷。当某个特定的链接被触发时，模态窗口被旋转放大到指定位置。看似很简单，但实际上有很多细节问题需要处理。在这里使用克隆元素的方法来制作模态窗口，当模态窗口关闭时，插件将销毁克隆元素，然后将原来的元素显示出来。

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()
```

jQuery 自适应窗口特效插件

已有 354 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

对话框/Tips

jQuery自适应窗口特效插件

HTML 结构：

高级应用：

远程内容：

可选参数：

公共方法(Public Methods)：

jQuery 自适应窗口特效插件

相关文章

简单的响应式纯js消息通知插件

超酷3D翻转式模态对话框插件

Drop - 实用JavaScript下拉弹出层插件

发表回复取消回复

热销模板

对话框/Tips

HTML 结构：

高级应用：

远程内容：

可选参数：

公共方法(Public Methods)：

jQuery 自适应窗口特效插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复