jQuery最简单的模式
Posted
tags:
中文标题：jQuery最简单的模式 原文标题：The simplest possible modal for jQuery 项目评级：Star:2600 Fork:674 下载地址：https://github.com/kylefox/jquery-modal 详情介绍一个简单的&；使用jQuery显示模式窗口的轻量级方法。
有关快速示例和演示，请访问jquerymodal.com。
为什么是另一个模态插件？
我发现的大多数插件都试图做得太多，并且有专门的方法来处理照片库、iframe和视频。由此产生的HTML&；CSS通常过于臃肿，难以自定义。
相比之下，这个插件处理了我遇到的两个最常见的场景
并且使用尽可能少的HTML&；尽可能使用CSS。
安装
您可以使用npm安装jquery modal：
npm install jquery-modal
或与Bower合作：
bower install jquery-modal
或者使用cdnjs的托管版本：
使用轨道？看看jquery modal rails插件！
jQuery要求：从0.3.0版本开始，jQuery 1.7是必需的。如果您使用的是早期版本的jQuery，则可以使用v.0.2.5标记。
与Bootstrap命名冲突：Bootstrap的模态使用相同的$.modal命名空间。如果您想在Bootstrap中使用jquery modal，最简单的解决方案是手动修改这个插件的名称。
开放
方法1：自动附加到链接
最简单的方法是将rel="modal:open"添加到链接中，并使用href属性指定在模态中打开的内容。
按ID打开现有DOM元素：
使用AJAX加载远程URL：
方法2：手动
您可以通过调用元素上的.modal()方法手动打开模态：
您也可以在链接上直接调用.modal()：
兼容性回退
您可以通过data-modal属性手动附加模态，为禁用JavaScript的用户提供一个干净的回退。这允许您在启用JavaScript的模式下，将指向href的链接正常写入（回退）。
淡入淡出过渡
默认情况下，覆盖&；窗口会立即出现，但您可以通过指定fadeDuration选项来启用渐变效果。
这将在覆盖和模态中同时衰减超过250毫秒如果您希望覆盖效果出现在窗口之前，可以指定fadeDelay选项。这指示在覆盖过渡期间窗口过渡应该在什么点开始。
因此，如果您希望窗口在覆盖完成80%时淡入：
或者，如果您希望窗口在覆盖过渡完全完成后的几分钟内淡出：
fadeDelay选项仅适用于打开模态时。关闭模态时，根据fadeDuration设置，模态和覆盖同时淡出。
衰落是唯一支持的过渡。
交割
因为一次只能有一个模态活动，所以不需要选择关闭哪个模态：
类似于链接可以自动绑定到打开模态的方式，它们可以使用rel="modal:close"绑定到关闭模态：
（请注意，使用AJAX加载的模态在关闭时会从DOM中删除）
检查当前状态
选项
这些是受支持的选项及其默认值：
事件
在打开/关闭周期的不同点，模态元素会触发以下事件（AJAX事件请参见下文）。
传递给这些事件处理程序的第一个也是唯一一个参数是modal对象，它有四个属性：
所以，你可以这样做：
AJAX
基本支持
jQuery Modal使用$.get来提供基本的AJAX支持。默认情况下，将显示一个简单的微调器（如果您包含了modal.css），并且类modal-spinner。如果您设置了modalClass选项，那么微调器将以该类名为前缀。
您可以通过spinnerHtml选项向微调器添加文本或其他HTML，也可以通过设置showSpinner: false完全禁用微调器。
默认微调器来自Tobias Ahlin的优秀SpinKit
事件
当请求AJAX模式时，会触发以下事件。
处理程序不接收任何参数。事件在<a>元素上触发，该元素启动了AJAX模式。
更高级的AJAX处理
提供更健壮的AJAX处理是个好主意，尤其是错误处理。jQuery modal没有提供jQuery提供的无数$.ajax选项，而是可以直接修改AJAX请求本身。
只需绕过默认的AJAX处理（即：不要使用rel="modal"）
并在链接的点击处理程序中发出AJAX请求。请注意，您需要在success回调中手动附加新的HTML/模态：
注意，当使用第二个（手动）方法时，AJAX响应必须封装在类modal的div中。
错误&；功能请求
发现bug了吗？无聊的！
开玩笑。请创建一个问题，并包含一个可公开访问的bug演示。Dropbox或JSFiddle
可以很好地演示可复制的bug，但只要可以公开访问，就可以使用任何东西。如果你的问题包括修复和合并，那么它更有可能得到解决；拉取请求。
有一个改进jquery模态的想法吗？令人惊叹的请分叉这个存储库，实现您的想法（如有必要，包括文档），并提交一个pull请求。
我不像以前那样频繁地使用这个库，所以如果你想看到修复/改进，最好提交一个拉取请求。没有测试用例的Bug和/或没有pull请求的改进将被毫不留情地关闭！
贡献
通缉维护人员
这个图书馆变得比我预想的更受欢迎和活跃，不幸的是我没有时间自己维护它。
如果你有兴趣帮助我维护这个图书馆，请告诉我——我很乐意你的帮助！
阅读更多关于成为维护人员的信息»
我特别喜欢那些对开发全新jQuery Modal 2.0感到兴奋的人。请参阅我的jQuery Modal 2.0提案，了解更多详细信息&；讨论
如何贡献
我欢迎对这个插件进行改进，特别是在以下方面：
请分叉并发送拉取请求，或者创建一个问题。请记住，这个插件的精神是极简主义，所以我对添加新的功能非常挑剔。
发展/贡献技巧
支持
请在StackOverflow上发布一个问题。也可以通过电子邮件提供商业支持-请联系kylefox@gmail.com对于费率。很遗憾，我无法提供免费的电子邮件支持。
许可证（麻省理工学院）
jQuery Modal是在[MIT许可证]下分发的（了解更多信息，请访问http://opensource.org/licenses/mit-license.php):
Copyright (c) 2012 Kyle Fox
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.