前言
在前端开发过程中，使用 npm 包可以有效地提升开发效率，降低开发成本。本文介绍一个常用的 npm 包 ohall，它是一个轻量级的模态框库，提供了丰富的 API，使用简单且易于扩展，下面将详细介绍其使用方法及注意事项。
安装 ohall
ohall 可以通过 npm 安装，命令如下：
npm install ohall --save
引入 ohall
在代码中引入 ohall，可以使用以下方法：
import ohall from 'ohall';
或在 HTML 中使用 script 标签引入：
<script src="https://unpkg.com/ohall"></script>
使用 ohall
在使用 ohall 时，我们需要先创建一个 modal 实例，可以传入一个 CSS 选择器，或者一个 HTML 元素对象作为参：
const modal = ohall('.modal') || ohall(document.getElementById('modal'));然后，我们就可以愉快地使用一系列 API 来操作 modal，API 列表如下：
.show()
显示 modal。
modal.show();
.hide()
隐藏 modal。
modal.hide();
.toggle()
切换 modal 的显示和隐藏。
modal.toggle();
.setContent(content)
设置 modal 中的内容，content 可以是字符串或者一个 HTML 元素对象。
modal.setContent('<div>Hello, World!</div>');.setOptions(options)
设置 modal 的配置项，options 是一个对象，可以覆盖默认的配置项。
modal.setOptions({
animation: 'fade',
duration: 300
});.destroy()
销毁 modal。
modal.destroy();
注意事项
- ohall 创建的 modal 实例是全局唯一的，所以我们在使用时需要注意不要重名，避免出现冲突。
- ohall 默认的配置项可以满足大部分需求，如果我们需要更多的功能，可以使用 setOptions 方法来扩展配置项。
结语
ohall 是一个十分实用的模态框库，其使用简单，扩展性强，适用于各种场景。希望本文对各位前端开发者有所帮助。最后，附上一个简单的示例代码，供大家参考。
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
------------ ------------
----- ---------------- --------------------------------------------------
-------
------
---- --------------
---- ---------------------
---- ----------------------
---- ---------------------
--- ------------------------------
------
---- -------------------
--------- ----------
------
---- ---------------------
------- ---------- ----------- -----------------------------
------
------
------
------
------- ---------------------------------------------------------
--------
----- ----- - ----------------
----------------------------------------------------------------- -- -- -
-------------
---
-------------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9e3d1de16d83a670d4