简介
js-modals 是一款前端 JavaScript 库，可以快速实现页面弹窗的功能。该库使用简便，支持自定义样式和内容，可以轻松打造符合需求的弹窗效果。
安装
js-modals 使用 npm 进行管理，可以通过以下命令进行安装：
npm i js-modals --save
使用
引入 js-modals
在 HTML 文档中引入 js-modals：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-----------------------
----- ---------------- -----------------------------
-------
------
------- -----------------------------
------- ------------------------------------
--------
----- -------- - ---------------------
----- ----- - ----------------------
------ ---------
-------- -----------
-------- -
-
----- -----
-------- -- -- -
--------------
-
--
-
----- -----
-------- -- -- -
--------------
-
-
-
---
--------------------------------------------------------------- ---------- -
-------------
---
---------
-------
-------这里我们使用 CommonJS 的方式引入 js-modals。
创建弹窗实例
使用 createModal 方法创建一个弹窗实例：
const modal = jsModals.createModal(options);
其中 options 是一个包含以下各个参数的对象：
title：弹窗的标题，可以为空字符串；content：弹窗的内容，可以是 HTML 字符串；buttons：由按钮对象组成的数组，用于操作弹窗的行为；
开启和关闭弹窗
使用 open 和 close 方法分别打开和关闭弹窗：
modal.open(); modal.close();
按钮对应的动作
在 options 中，对按钮对象的定义如下：
{
text: '按钮文本', // 按钮文本
class: 'btn-class', // 按钮 CSS 类名
onClick: function() {
// 点击按钮后的动作
}
}我们可以为按钮定义一个 onClick 方法，点击后进行相应的动作。
自定义样式
我们可以使用 CSS 样式来自定义弹窗的样式，可以重写 js-modals.css 中的基础样式。
示例
下面是一个实现了自定义样式和动态按钮的示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-----------------------
----- ---------------- -----------------------------
-------
------------- -
---------- ------
----------- ------
-
----------- -
----------------- --------
------ -----
-------------- ----
-------- --- -----
------------- -----
------- --------
-
--------
-------
------
------- -----------------------------
------- ------------------------------------
--------
----- -------- - ---------------------
----- ----- - ----------------------
------ -----------
-------- -
------
------ ----------------------
------ --------- ------------
--------
------ ---------------------
------ -------- --------------
--------
-------
--
-------- --
---
----- --------- - -
----- -----
------ -------------
-------- ---------- -
----- ---- - --------------------------------------
----- --- - -------------------------------------
------------------------------
--------------
-
--
----- -------- - -
----- -----
------ -------------
-------- ---------- -
------------------------------------- - ---
------------------------------------ - ---
-
--
---------------------------
--------------------------
----- ------- - --------------------------------------
--------------------------------- ---------- -
-------------
---
---------
-------
-------在该示例中，我们实现了自定义的样式和两个动态按钮的功能。在弹窗中，我们呈现了一个表单，并为表单添加了一个提交按钮和一个重置按钮，在用户进行相应操作后会触发按钮所对应的动作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b46c6eb7e50355dbede