如果你在开发前端页面的时候需要使用弹窗，那么可以考虑使用 remodal 这个 npm 包。remodal 是一个轻量级且易于使用的模态框插件，它支持多种展示方式和自定义选项。
安装 remodal
使用 npm 安装 remodal：
--- ------- ------- ------
引入 remodal
在你的 HTML 文件中，引入 remodal.min.css 和 remodal.min.js：
----- ---------------- ------------------------------ -- ------- --------------------------------------
创建一个基本的模态框
创建一个包含 data-remodal-id 属性的元素作为模态框的唯一标识。在这个元素之外创建一个用于触发模态框的按钮，并将 data-remodal-target 属性设置为模态框的标识符。
---- --- --- ---- --------------- ------------------------ ------- --------------------------- ------------------------------- ---------------- ---------------- ------ ---- -------- --- ------- ------------------------------------------
自定义选项
除了默认提供的选项外，你还可以通过 JavaScript 代码来自定义 remodal 的行为。下面是一个例子：
-------------------------- -- -
--- ---- - --------------------------------------
------------- ------
--------------- -----
-------------------- -----
---
---在这个例子中，我们创建了一个 remodal 实例并将其赋值给变量 inst。通过对象字面量的方式传入了三个选项：
hashTracking：当模态框打开时是否在 URL 中添加哈希值。closeOnConfirm：当点击模态框中的确认按钮时是否关闭模态框。closeOnOutsideClick：当用户点击模态框之外的区域时是否关闭模态框。
事件
remodal 提供了一些事件可以让你在合适的时候执行你想要的操作。下面是一些常用的事件：
onOpen
在模态框打开时触发该事件。
--------------------------------------- -------- -- - ----------------------- ---
onClose
在模态框关闭时触发该事件。
---------------------------------------- -------- -- - ----------------------- ---
onConfirm
在模态框中点击确认按钮时触发该事件。
------------------------------------------ -------- -- - ------------------------ ---
onCancel
在模态框中点击取消按钮时触发该事件。
----------------------------------------- -------- -- - ------------------------ ---
总结
remodal 是一个非常实用的 npm 包，它可以帮助我们轻松地创建各种类型的模态框。在使用 remodal 的过程中，我们需要注意一些细节，比如如何自定义选项、如何处理事件等。如果你想要了解更多关于 remodal 的知识，可以查看官方文档。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/33985