简介
alerted 是一个简单快捷的前端弹窗库，它能够帮助我们快速实现弹窗的功能。它基于 Bootstrap 模态框，使用 jQuery 以及 alertify.js 库作为支撑，提供了丰富的配置项和方法，可以自定义弹窗内容、样式、事件以及动画效果等。
安装
alerted 可以通过 npm 或者 yarn 安装，使用前需确保已安装了 jQuery 和 alertify.js。
--- ------- ------- ------ ---- --- -------
使用
初始化
先在 HTML 中引入 CSS 和 JS 文件，然后在 JavaScript 中进行初始化。
----- ---------------- ----------------------------- ----- ---------------- ---------------------------- ----- ---------------- --------------------------- ------- --------------------------------- ------- ----------------------------------- ------- ----------------------------------
---------------
弹窗
使用 show 方法来弹出弹窗，并传入相应的参数。
--------------
------ -----
-------- -----
-------- -
-
----- -----
---------- --------------
--------- ---------- -
------------------
-
--
-
----- -----
---------- --------------
--------- ---------- -
------------------
-
-
-
---其中，title 表示弹窗标题，message 表示弹窗内容，buttons 表示弹窗按钮数组，可以设置多个按钮，每个按钮包含三个属性：text 表示按钮名称，className 表示按钮类名，callback 表示按钮点击回调函数。
配置项
alerted 提供了多个配置项，在 show 方法中传入相应的参数即可进行配置，具体参数及说明如下：
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | String | 空字符串 | 弹窗标题 |
| message | String | 空字符串 | 弹窗内容 |
| content | String | 空字符串 | 自定义弹窗内容 |
| width | Number | 400 | 弹窗宽度（单位：px） |
| height | Number | 240 | 弹窗高度（单位：px） |
| buttons | Array | 空数组 | 弹窗按钮数组 |
| buttonAlign | String | right | 弹窗按钮对齐方式（left、center、right） |
| resizable | Boolean | true | 是否可以调整弹窗大小 |
| draggable | Boolean | true | 是否可以拖拽弹窗 |
| padding | Number | 20 | 弹窗内边距（单位：px） |
| modal | Boolean | true | 是否启用模态框 |
| backdrop | Boolean | true | 是否显示背景遮罩 |
| effect | Function | 空函数 | 弹窗动画效果 |
| onShow | Function | 空函数 | 弹窗打开时的回调函数 |
| onHide | Function | 空函数 | 弹窗关闭时的回调函数 |
方法
alerted 提供了多个方法，用于控制弹窗的显示和隐藏，具体方法及说明如下：
| 方法 | 参数 | 说明 |
|---|---|---|
| show | options | 显示弹窗 |
| hide | 隐藏弹窗 | |
| setTitle | title | 设置弹窗标题 |
| setMessage | message | 设置弹窗内容 |
| setContent | content | 设置自定义内容 |
| setButtons | buttons | 设置弹窗按钮 |
| setEffect | effect | 设置弹窗动画效果 |
| setPadding | padding | 设置弹窗内边距 |
| setSize | width, height | 设置弹窗大小 |
| setPosition | left, top | 设置弹窗位置 |
| setModal | modal | 设置模态框 |
| setBackdrop | backdrop | 设置背景遮罩 |
| onShow | callback | 弹窗打开时回调函数 |
| onHide | callback | 弹窗关闭时回调函数 |
示例
------- ---------- ------------ ----------------------------
--------------------------- ---------- -
--------------
------ -----
-------- -----
-------- -
-
----- -----
---------- --------------
--------- ---------- -
------------------
-
--
-
----- -----
---------- --------------
--------- ---------- -
------------------
-
-
-
---
---总结
以上是 alerted 的使用教程，我们可以看出来，它使用起来非常方便，提供了多样的配置项和方法，可以适应各种需求。在实际项目中，我们可以根据具体业务场景选择合适的配置项和方法，来实现弹窗功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005745081e8991b448ea016