平谷设计网站：为您的站点提供12种免费的Modal窗口库和插件

2019.06.18 平谷设计网站

195

浏览器的提醒实在是太烦人了。从来没有人喜欢过他们。但这是我们所有的，直到模态窗口出现。

由于我们今天拥有的快速发展的JavaScript技术，加上大量的开源社区，您可以快速地建立干净的模式窗口。

平谷设计网站在这篇文章中，我分享了我最喜欢的免费模式窗口插件，所有这些都有各种各样的特性和样式可供选择。

1.jQuery模式

undefined

寻找超级清洁和简单的使用？然后jQuery模式应该是你的资源。

这个可访问的插件可以使用键盘快捷键(ESC关闭)，甚至支持触摸操作。整个图书馆的重量约1KB，这是超级小。

更不用说实际的设计是足够干净的，可以在任何网站上工作。绝对是我最喜欢的超洁净UX.

2.精简模式

undefined

这个莉诺模态jQuery插件具有非常类似的“干净”设计，就像jQueryModal插件一样。

他们看起来都很相似，也提供了相似的体验。但是leanModal很突出，因为它支持用于定制动画效果和更多技术内容的API回调。

这两个库都是轻量级的，它们都运行在jQuery上。在我看来，你也不能走错路。

3.iziModal.js

undefined

进入更复杂的模态设计方面iziModal.js.

这平谷设计网站绝对是一个更大的插件很多更多的是美学。它支持数十个具有滑动效果、褪色效果的动画，甚至还支持选项卡模式来在登录/注册表单之间切换。

iziModal是个人最喜欢的，因为它的干净设计和奇妙的UI/UX效果。

然而，它是一个更技术性的设置，它有一个更实质性的文件大小。如果你能忽略那些东西，你就会喜欢这种经历。

4.ARIA模式

undefined

W3型威亚首字母缩略词既长又令人困惑。它确实定义了您应该如何处理丰富的经验。更易访问的网站.

很少有模态窗口是在设计时考虑到可访问性的。但是ARIA模态jQuery插件是我发现的最好的插件。

它得到频繁的更新，并应该工作在所有设备，所有浏览器，所有输入(点击和触摸)。

唯一的问题是，平谷设计网站面向可访问性的插件在表面上通常更“丑”一些。

如果您更关心可访问性而不是美学，这将是完美的。

5.Remodal

undefined

这个雷莫达尔脚本是为速度而设计的。它运行在CSS动画之上，并在一个超大规模的jQuery脚本上工作。

然而，Remodal有一个小问题：开发人员不再支持它。

您可以在GitHub回购但是，除非有人分叉代码，否则这个插件将永远保留在v1.0中。尽管如此，我仍然认为它是一个可用的插件，不太可能构成任何安全风险。

6.FancyBox

undefined

虽然技术上不是一个完整的“模态”脚本，但我真的想包括FancyBox因为它模仿模态行为。

FancyBox插件运行在jQuery上，并根据缩略图列表创建一个模式幻灯片库。它不允许你像你通常发现的那样创建模态警告框，所以它不是一个直接的模态窗口插件。

然而，它将很好地与另一个模态脚本混合在一个页面上，因为图像幻灯片Lightbox感觉就像一个真正的模态窗口。

7.动画Modal.js

undefined

动画Modal.js是唯一的，平谷设计网站因为它接管了整个屏幕而不仅仅是页面上的一小部分空间。

这可能不是你要找的，这是完全没有问题的！我喜欢这种风格化的模式，因为它有一个简单的设计和大量的动画效果库(加上一个用于定制它们的API)。

但是没有足够的全屏效果，所以这只适用于喜欢这种风格的开发人员。

8.SimpleModal

undefined

带着简单模态脚本，你会发现美学和可用性之间有很好的平衡。模态窗口感觉非常自然，但它不依赖疯狂的动画或冗长的JS。

在主页上，您可以找到从嵌入式视频到图像、自定义内容、确认/取消调制解调器、登录字段等所有内容的示例。

绝对是一个多才多艺的模式脚本，有足够的空间进行定制。

9.Avgrund Modal

undefined

在我看来真正出类拔萃的脚本是那些做了一些不同的事情的脚本。Avgrund Modal就是其中之一。

一旦激活此模式，动画就会移动。整页进入后台。这不是每个网站都能用的东西。但它是超级独特和相当有趣的观看。

它运行在jQuery上，支持所有现代浏览器，并为可以追溯到IE6+的旧浏览器提供自然的退路。

10.popModal

平谷设计网站

一看popModal页面你会明白为什么这东西这么受欢迎。使用popModal，您可以设计支持冗长滚动文本、确认/取消按钮甚至简单通知消息的自定义窗口。

所有的CSS代码是超级容易编辑，让你完全控制设计。

我没有喜爱动画风格，但绝对不可怕。我只是认为popModal在自然融入动画的网站上效果最好。

11.甜言蜜语2

undefined

以下是我最喜欢的网络警告脚本之一：甜警报2.

它是一个没有依赖关系的普通JS库，并且基于WI-ARIA标准是完全可访问的。如果您查看主页，实际上可以将传统的警报框与SweetAlert模式进行比较。

差别就像黑夜和白天一样。

12.rmodal.js

平谷设计网站

平谷设计网站介绍的大多数库都依赖于jQuery。但是您可以使用一些完全不依赖的模态脚本(上面的SweetAler 2就是其中之一)。

rmodal.js提供一个自然的模态窗口设计，可以适合任何网站。它不依赖于任何JS库，而且它非常小，总计只有1.2KB。

如果你想把它和BS 3/BS 4布局结合起来的话，它也可以很好的引导。

但是看一眼样本预览

平谷设计网站：为您的站点提供12种免费的Modal窗口库和插件

1.jQuery模式

2.精简模式

3.iziModal.js

4.ARIA模式

5.Remodal

6.FancyBox

7.动画Modal.js

8.SimpleModal

9.Avgrund Modal

10.popModal

11.甜言蜜语2

12.rmodal.js

相关推荐