简介
stanchionjs是一个适用于Web前端的弹出框插件，使用简便，且在可扩展性和定制性方面非常强。此插件是通过npm包管理器进行安装和使用的，本篇文章将详细介绍其安装和使用方式。
安装
使用 npm 包管理器安装 stanchionjs 非常简单：
npm install stanchionjs --save
使用
导入
在项目中，我们需要在需要使用 stanchionjs 的文件中导入它：
import stanchion from 'stanchionjs';
基本使用
首先，我们需要准备 HTML 模板：
-- -------------------- ---- -------
---- --------------
---- ---------------------
--- -----------------------------
------- ----------------- -------------------------------
------
---- -------------------
---------------
------
---- ---------------------
------- ---------- ------------ --------------------------------
------- ----------- --------------------------------
------
------然后，我们创建一个 stanchion 对象，来管理该弹框并展示它：
// 实例化弹框
const modal = stanchion('.modal');
// 显示弹框
modal.show();这样，我们就能够在页面上看到一个基本的弹出框。
高级应用
自定义样式
如果想自定义你的模态框，你可以在模板代码中添加自己的 CSS 样式，比如：
-- -------------------- ---- ------- ------ - -------- ------- --------- ------ ----- ---- ---- ---- -------- ----- ---------- --------------- ------ ------ ------ ----------------- ----- -------------- ---- ----------- - - ---- ------- -- -- ---- - ------------- - -------- ----- -------------- --- ----- -------- - ------------ - ------- -- - ----------- - -------- ----- - ------------- - ----------- ------ -------- ---- ---- ----- -
事件回调
stanchion 提供了三个基础回调函数，当弹框过程中各种弹框事件发生时，我们可以自定义一些实现方式。这三个回调函数包括：
onBeforeShow：弹框显示前的回调函数onBeforeHide：弹框隐藏前的回调函数onAfterHide：弹框隐藏后的回调函数
例如，在模态框显示之前我们需要模态框消失 5 秒钟，我们可以使用 show 方法的回调函数，实现此功能：
-- -------------------- ---- -------
-- -----
----- ----- - ------------------- -
------------- -- -- -
------------- -- -
-------------
-- ------
--
---
-- ----
-------------这将导致模态框在 5 秒后自动消失。
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------ ----------
-------
------ -
-------- -------
--------- ------
----- ----
---- ----
---------- --------------- ------
------ ------
----------------- -----
-------------- ----
----------- - - ---- ------- -- -- ----
-------- --
----------- ------- --- ---------
-
----------- -
-------- --
-
------------- -
-------- -----
-------------- --- ----- --------
-
------------ -
------- --
-
----------- -
-------- -----
-
------------- -
----------- ------
-------- ---- ---- -----
-
--------
-------
------
------- ---------------------------------
---- --------------
---- ---------------------
--- -----------------------------
------- ----------------- -------------------------------
------
---- -------------------
---------------
------
---- ---------------------
------- ---------- ------------ --------------------------------
------- ----------- --------------------------------
------
------
------- --------------------------------------------------------
--------
----- ----- - ------------------- -
------------- -- -- -
---------------------
--
------------- -- -- -
---------------------
--
------------ -- -- -
---------------------
--
---
----- ------------ - ------------------------------------------
-------------------------------------- -- -- -
-------------
---
---------
-------
-------参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600576b581e8991b448eaada