什么是 tinybox？
Tinybox 是一个基于 jQuery 实现的轻量级弹出框插件，它具有以下特点：
- 简单易用
- 支持图片、HTML 内容展示
- 支持自定义样式和配置
- 响应式布局
Tinybox 可以用于各种需要弹出提示的场景，如登录、注册、表单提交等。
安装和使用
安装
使用 npm 安装 tinybox：
npm install tinybox --save
引入
在需要用到 Tinybox 的页面中引入 jQuery 和 Tinybox：
<!-- 引入 jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- 引入 Tinybox 样式 --> <link rel="stylesheet" href="node_modules/tinybox/dist/tinybox.min.css"> <!-- 引入 Tinybox JS 文件 --> <script src="node_modules/tinybox/dist/tinybox.min.js"></script>
使用
通过 TINYBOX.show 方法调用 Tinybox，示例代码如下：
TINYBOX.show({
title: 'Hello',
content: 'Welcome to Tinybox!',
});配置选项
Tinybox 提供了多种配置选项，可以通过 TINYBOX.defaults 属性修改默认配置，也可以在 show 方法中传入配置项，示例代码如下：
-- -------------------- ---- ------- -- ------ ---------------------- - ---- -- - ---- -------- -------------- ------ -------- -------- -------- -- ---------- ------ ---- ---
下面是 Tinybox 支持的配置选项及其默认值：
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| title | string | '' | 弹出框标题 |
| content | string | '' | 弹出框内容 |
| width | number | 400 | 弹出框宽度 |
| height | number | 0 | 弹出框高度 |
| top | number | 0 | 弹出框上边距 |
| left | number | 0 | 弹出框左边距 |
| overlay | boolean | true | 是否显示遮罩层 |
| overlayClose | boolean | false | 点击遮罩层是否可以关闭弹出框 |
| close | boolean | true | 是否显示关闭按钮 |
| escClose | boolean | false | 是否支持 Esc 键关闭弹出框 |
| class | string | '' | 自定义类名，用于自定义样式 |
| transition | string | 'zoom' | 弹出框动画类型，支持 'zoom'，'fade'，'slide' |
| transitionTime | number | 300 | 弹出框动画时间，单位 ms |
| beforeShow | function | noop | 弹出框显示前的回调函数 |
| afterShow | function | noop | 弹出框显示后的回调函数 |
| beforeClose | function | noop | 弹出框关闭前的回调函数 |
| afterClose | function | noop | 弹出框关闭后的回调函数 |
| onCompleted | function | noop | 弹出框显示和关闭完成后执行的回调函数，会调用两次 |
示例代码
下面是一个使用 Tinybox 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------------
----- ---------------- -------------------------------------------------
-------
------
------- ------------------ ----------------
------- ----------------------------------------------------------------------------
------- --------------------------------------------------------
--------
------------------------------- -
--------------
------ --------
-------- ----------- -- --------------
------ ----
----------- ---------- -
-------------- ---------
-
---
---
---------
-------
-------总结
Tinybox 是一个简单易用的弹出框插件，它支持自定义样式和配置，能够满足各种需要弹出提示的场景。通过本文的介绍，相信您已经掌握了如何使用 Tinybox。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f69be40a9b7065299ccb828