Vanilla Modal 是一个轻量级的 JavaScript 库，能够帮助我们在网页中创建简单、易用而且高度自定义的模态框。在本文中，我们将介绍如何使用 Vanilla Modal ，并提供一些使用该库的最佳实践。
安装 Vanilla Modal
我们可以使用 npm 来安装 Vanilla Modal ：
--- ------- -------------
安装完成后，在你的代码中引入它：
------ ------------ ---- ---------------- ----- ----- - --- ---------------
创建模态框
要创建模态框，请在 HTML 文件中添加一个包含模态框内容的 div 元素，并为其添加一个类名：
---- ---------------------- --------- ---------- -------- ------- ---- ----------- ------
接下来，在 JavaScript 中选择该元素，并将其传递给 Vanilla Modal 的 add 方法：
----- ------------ - ----------------------------------------- ------------------------
现在，当我们调用 modal.show() 方法时，模态框就会显示出来了。
-------------
自定义模态框
我们可以使用 Vanilla Modal 提供的各种选项来自定义模态框。以下是一些示例：
关闭按钮
要在模态框中添加关闭按钮，我们可以在模态框内容元素中添加一个具有 js-modal-close 类的按钮：
---- ---------------------- ------- ------------------------------------- --------- ---------- -------- ------- ---- ----------- ------
动画效果
Vanilla Modal 允许我们使用 CSS 过渡或动画来为模态框添加动画效果。默认情况下，它使用 fade 类添加淡入淡出动画：
----- - -------- -- ----------- ------- ---- ----- - -------- - -------- -- -
我们也可以自定义过渡类名和动画时长：
----- ----- - --- -------------- ----------- ---------------------- ------------------- --- ---
模态框外面的内容
默认情况下，当模态框显示时，页面上的其他内容会被覆盖。如果我们希望在模态框中显示一些内容，但又不想将整个页面覆盖掉，可以将 overlay 选项设置为 false ：
----- ----- - --- -------------- -------- ----- ---
最佳实践
以下是一些使用 Vanilla Modal 的最佳实践：
- 在 HTML 中创建模态框内容，并将其传递给 Vanilla Modal 的
add方法。 - 使用自定义选项来使模态框符合你的需求。
- 将模态框关闭按钮添加到模态框内容中，并将其与
js-modal-close类相关联。 - 在模态框外面添加一个半透明的覆盖层，以便更好地突出模态框。
结论
使用 Vanilla Modal 可以轻松创建自定义的模态框，并使其符合你的需求。在本文中，我们介绍了如何安装和使用 Vanilla Modal ，并提供了一些最佳实践。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/37108