什么是 pop.min.js
pop.min.js 是一个轻量级的 JavaScript 插件库，可以很方便地创建各种弹出框和模态框。它的特点包括：
- 体积小，仅有 4KB（压缩后）
- 简单易用，只需引入 js 文件即可
- 功能齐全，支持自定义弹出框样式、关闭按钮、拖拽等
安装
可以通过 npm 安装 pop.min.js：
npm install pop.min.js
也可以直接下载 js 文件并引入：
<script src="path/to/pop.min.js"></script>
使用方法
基本用法
如果只需要创建简单的弹出框，可以直接调用 pop() 函数。例如：
pop("Hello World!");这将创建一个包含 "Hello World!" 文字的弹出框。
自定义弹出框
如果需要自定义弹出框的样式和内容，可以传入一个对象作为参数，对象包含以下属性：
title：弹出框的标题，可以是 HTML 代码content：弹出框的内容，可以是 HTML 代码width：弹出框的宽度，默认为 300pxheight：弹出框的高度，默认为 autodraggable：是否可拖拽，默认为 truemask：是否需要遮罩，默认为 truemaskClose：是否点击遮罩可以关闭弹出框，默认为 truebuttons：自定义按钮，可以是对象数组或函数
例如：
-- -------------------- ---- -------
-----
------ ----------
-------- ----- -- - ------ ------- --- --- --------- --- ---------- --- ------- -- --- ------ ------ --------- -- ---- --------
------ ----
-------- -
-
----- --------
---------- -------- -----------
--------- ---------- -
---------------------
-
--
-
----- -------
---------- -------- ----------
--------- ---------- -
--------------------
-
-
-
---关闭弹出框
弹出框有两种关闭方式：
- 点击弹出框上的关闭按钮
- 调用
pop.close()函数
例如：
pop.close(); // 关闭当前弹出框
自定义样式
pop.min.js 把所有样式都放在了一个 css 文件中，可以通过自定义样式来调整弹出框的样式。
例如，可以通过以下样式调整弹出框的颜色和字体：
-- -------------------- ---- ------- ------------ - ----------------- -------- ------------ ------ ----------- - ---------- - -------------- --- ----- ----- - ------------ - ------ ----- - -------- - -------- ----- -------------- ---- ------- -------- - ---------- - ----------------- ----- ------ ----- - --------- - ----------------- ----- ------ ----- -
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ---------------
----- ---------------- ---------------------------
-------
------------ -
----------------- --------
------------ ------ -----------
-
---------- -
-------------- --- ----- -----
-
------------ -
------ -----
-
-------- -
-------- -----
-------------- ----
------- --------
-
---------- -
----------------- -----
------ -----
-
--------- -
----------------- -----
------ -----
-
--------
-------
------
------- ------------------------- -----------
------- ----------------------------------
--------
-------- --------- -
-----
------ ----------
-------- ----- -- - ------ ------- --- --- --------- --- ---------- --- ------- -- --- ------ ------ --------- -- ---- --------
------ ----
-------- -
-
----- --------
---------- -------- -----------
--------- ---------- -
------------
---------------------
-
--
-
----- -------
---------- -------- ----------
--------- ---------- -
--------------------
-
-
-
---
-
---------
-------
-------运行代码，点击 "Click me" 按钮，即可弹出自定义的弹出框。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bce967216659e244a98