Remodal

Remodal

不再积极维护。我已不再有兴趣维护 jQuery 插件。如果你有修复，欢迎提交 PR。

响应式、轻量、快速、与 CSS 动画同步、完全可定制的模态窗口插件，支持声明式配置和哈希跟踪。

注意事项

• 支持所有现代浏览器。
• 支持 IE8+。要启用 IE8 样式，请像 modernizr 那样在 html 元素上添加 lt-ie9 类。
• 支持 jQuery、jQuery2、Zepto。
• 支持 Browserify。

开始

从 GitHub 下载最新版本，或通过包管理器安装：

npm install remodal
bower install remodal

将 dist 文件夹中的 CSS 文件包含在 head 部分：

<link rel="stylesheet" href="../dist/remodal.css">
<link rel="stylesheet" href="../dist/remodal-default-theme.css">

在 </body> 之前引入 dist 文件夹中的 JS 文件：

<script src="../dist/remodal.min.js"></script>

您可以为模态框定义背景容器（用于实现模糊等效果）。它可以是任何简单的内容包装器： 抱歉，我无法翻译“```html

现在创建模态对话框：
```html

如果不想触发锚点跳转，请不要使用 id 属性，改用 data-remodal-id。 So, now you can call it with the hash:

<a href="#modal">Call the modal with data-remodal-id="modal"</a>

或者：

<a data-remodal-target="modal">Call the modal with data-remodal-id="modal"</a>

选项

您可以通过data-remodal-options属性传递额外的选项。

哈希追踪

默认值：true 要打开模态框而不使用哈希，请使用data-remodal-target属性。

<a data-remodal-target="modal" href="#">Call the modal with data-remodal-id="modal"</a>

closeOnConfirm

默认值：true

如果为 true，则在点击确认按钮后关闭模态窗口。

closeOnCancel

默认值：true

如果为 true，则在点击取消按钮后关闭模态窗口。

closeOnEscape

默认值：true

如果为 true，则在按下 ESC 键后关闭模态窗口。

closeOnOutsideClick

默认值：true

如果为 true，则通过点击外部区域关闭模态窗口。