jquery-modal

一种使用 jQuery 显示模态窗口的简单轻量级方法。

如需快速示例和演示，请访问 jquerymodal.com。

为什么需要另一个模态插件？

我发现的大多数插件都试图做得太多，并且有专门处理照片画廊、iframe 和视频的方式。 由此产生的 HTML 和 CSS 往往臃肿且难以定制。

相比之下，这个插件处理了我最常遇到的两种场景：

• 显示现有的 DOM 元素
• 通过 AJAX 加载页面

并且尽可能使用最少的 HTML 和 CSS 来实现。

安装

你可以使用 npm 安装 jquery-modal：

npm install jquery-modal

或者使用 Bower：

bower install jquery-modal

或者使用 cdnjs 上的托管版本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css" />

使用 Rails？ 请查看 jquery-modal-rails 插件！

jQuery 要求： 从 0.3.0 版本开始，需要 jQuery 1.7。如果您使用的是更早版本的 jQuery，可以使用 v.0.2.5 标签。

与 Bootstrap 的命名冲突： Bootstrap 的 modal 使用了相同的 $.modal 命名空间。如果您想将 jquery-modal 与 Bootstrap 一起使用，最简单的解决方案是手动修改此插件的名称。

打开

方法 1：自动绑定到链接

最简单的方法是在你的链接中添加 rel="modal:open"，并使用 href 属性来指定要在模态框中打开的内容。

通过 ID 打开现有的 DOM 元素：

<form id="login-form" class="modal">
  ...
</form>

<a href="#login-form" rel="modal:open">Login</a>

通过 AJAX 加载远程 URL：

<a href="login.html" rel="modal:open">Login</a>

方法 2：手动方式

你可以手动打开一个