# messageBox

**Repository Path**: amswait/message-box

## Basic Information

- **Project Name**: messageBox
- **Description**: 原生alert，confirm的替代品
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-08
- **Last Updated**: 2025-02-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MessageBox 弹框

> MessageBox 的作用是替代系统自带的 `alert`、`confirm` ，仅适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用定制的弹窗。样式与ElementUI的同名组件基本一致。
> 原生，无依赖项，自适应布局，双端通用，如有弹窗层级问题需要自行调整。
> 优先使用shadow来避免与页面的样式冲突，兼容IE10+。

## 效果预览

![无音频版本](readme/无音频版本.gif)



## 引用方式

```html
<script src="/xx/xx/xx/message-box.min.js"></script>
```

注意：需要确保CSS文件在JS同级目录；



## API

- `messageBox`：访问核心弹窗对象。
- `$close`：关闭弹窗的方法。
- `$alert`：显示带有消息和确认按钮的提示框。
- `$confirm`：显示带有消息、确认和取消按钮的确认框。

 	<!--$.alert与$.confirm的区别只有是否显示取消按钮，其余出参入参完全一致-->



## options

| 配置项                    | 类型     | 是否必填 | 示例                                                         | 是否可传入HTML代码                                 |
| ------------------------- | -------- | -------- | ------------------------------------------------------------ | -------------------------------------------------- |
| msg                       | String   | 是       | `$alert('测试文案')`                                         | `$alert('<strong>这是 <i>HTML</i> 片段</strong>')` |
| title                     | String   | 否       | `$alert('测试', '测试标题')`\|                               | 同上                                               |
| options                   | Object   | 否       |                                                              |                                                    |
| options.confirmButtonText | String   | 否       | `$confirm("测试",null,{confirmButtonText:"确认文案"})`       | 同上                                               |
| options.cancelButtonText  | String   | 否       | `$confirm("测试",null,{cancelButtonText:"取消文案"})`        | 同上                                               |
| options.callback          | Function | 否       | `$confirm("测试",void 0,{callback:function(result, type){$alert('结果：'+ result+'  触发按钮类型：'+type)}});` |                                                    |

#### options.callback出参说明

| 参数名 | 含义                                                         |
| ------ | ------------------------------------------------------------ |
| result | 确认的结果：点击关闭按钮与取消按钮为false，点击确认按钮为true |
| type   | 触发事件的按钮类型：close为关闭按钮，confirm为确认按钮，cancel为取消按钮 |

## Features
- 支持初始化时导入css自定义主题文件;
- ？[^ 1]支持黑夜模式 （是否能支持IE11）;



[^ 1]: 带？为待定项