# side-popup

> Side Popup，基于 Bootstrap 的侧弹窗组件

Latest version **1.1.0** (published 2020-07-10) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install side-popup
pnpm add side-popup
yarn add side-popup
bun add side-popup
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-07-10 |
| First published | 2020-04-19 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 68.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ambit Tsai |
| Maintainers | ambit_tsai |
| Keywords | side-popup, popup, 侧弹窗 |

## Links

- npm: https://www.npmjs.com/package/side-popup
- Repository: https://github.com/ambit-tsai/side-popup
- Homepage: https://github.com/ambit-tsai/side-popup#readme
- Issues: https://github.com/ambit-tsai/side-popup/issues
- npm.io page: https://npm.io/package/side-popup

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2020-07-10
- 1.0.0 — 2020-06-05
- 0.0.1 — 2020-04-19

## README

# 侧边弹窗  ![Version](https://img.shields.io/npm/v/side-popup.svg)
侧边弹窗组件，基于 Bootstrap v3 的模态框


#### 安装
1. 使用NPM：`npm install -S side-popup`
1. 直接下载：<a href="dist/side-popup.min.js" target="_blank">压缩版</a>


#### 示例
用法 1
```html
<link href="path/to/bootstrap-v3.css" rel="stylesheet">
<script src="path/to/jquery.js" type="text/javascript"></script>
<script src="path/to/bootstrap-v3.js" type="text/javascript"></script>
<script src="path/to/side-popup.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var popup = SidePopup.open({    // 打开一个侧弹窗
        attrs: {
            id: 'myPopup',
        },
        header: {
            title: '弹窗1',
        },
        body: {
            html: '<h1>Hello World</h1>',
        },
    });
    popup.openSubPopup({            // 打开一个子弹窗
        header: {
            title: '弹窗2',
        },
    });
    popup.closeSubPopup();          // 关闭子弹窗
    popup.close();                  // 关闭侧弹窗
</script>
```
用法 2
```javascript
import SidePopup from 'side-popup';

SidePopup.open('#myPopup');         // 打开指定弹窗
SidePopup.close('#myPopup');        // 关闭指定弹窗
```


#### 构造函数
|参数|类型|说明|
|-|-|-|
|options|object|弹窗配置项|


#### 配置项说明
|名称|类型|默认值|说明|
|-|-|-|-|
|type|string|"right"|选择左右弹窗，可选："left"、"right"<br><small>*（子弹窗不适用）*</small>|
|backdrop|boolean|false|点击背景关闭弹窗<br><small>*（子弹窗不适用）*</small>|
|width|number/string||宽度。如：300、"100px"、"30%"|
|addedClass|string||附加的 CSS 类|
|attrs|object|{class: 'modal-dialog'}|配置弹窗元素的属性|
|afterRender|function||等待GUI渲染后执行|
|header|object|{...}|header 的配置项|
|*header*.show|boolean|true|是否显示 header|
|*header*.tag|string|"div"|HTML 标签|
|*header*.addedClass|string||附加的 CSS 类|
|*header*.showCloseBtn|boolean|true|是否显示关闭按钮|
|*header*.title|string||标题|
|*header*.html|string/Element/jQuery||附加的内容|
|*header*.attrs|object|{class: 'modal-header'}|配置 header 元素的属性|
|body|object|{...}|body 的配置项|
|*body*.show|boolean|true|是否显示 body|
|*body*.tag|string|"div"|HTML 标签|
|*body*.addedClass|string||附加的 CSS 类|
|*body*.html|string/Element/jQuery||附加的内容|
|*body*.attrs|object|{class: 'modal-body'}|配置 body 元素的属性|
|footer|object|{...}|footer 的配置项|
|*footer*.show|boolean|true|是否显示 footer|
|*footer*.tag|string|"div"|HTML 标签|
|*footer*.addedClass|string||附加的 CSS 类|
|*footer*.html|string/Element/jQuery||附加的内容|
|*footer*.attrs|object|{class: 'modal-footer'}|配置 footer 元素的属性|
|buttons|object[]|[{<br>&nbsp;&nbsp;html: '确定',<br>&nbsp;&nbsp;attrs: {<br>&nbsp;&nbsp;&nbsp;&nbsp;class: 'btn btn-primary',<br>&nbsp;&nbsp;&nbsp;&nbsp;type: 'button'<br>&nbsp;&nbsp;}<br>}]|footer 按钮的配置项|
|*buttons[i]*.addedClass|string||附加的 CSS 类|
|*buttons[i]*.html|string/Element/jQuery||附加的内容|
|*buttons[i]*.onClick|function||点击事件处理函数|
|*buttons[i]*.attrs|object||配置按钮元素的属性|

#### 静态方法
|方法|参数说明|方法说明|
|-|-|-|
|SidePopup `open`(object *options*)|配置项（同构造函数的参数）|初始化弹窗，并打开|
|SidePopup `open`(string *selector*)|jQuery 选择器|打开匹配选择器的弹窗|
|SidePopup `open`(Element *el*)|DOM 元素|打开指定弹窗|
|SidePopup `open`(jQuery *$el*)|jQuery 对象|打开指定弹窗|
|void `close`(string *selector*)|jQuery 选择器|关闭匹配选择器的弹窗|
|void `close`(Element *el*)|DOM 元素|关闭指定弹窗|
|void `close`(jQuery *$el*)|jQuery 对象|关闭指定弹窗|


#### 静态属性
|属性|类型|说明|
|-|-|-|
|id|string|标识|
|defaultOptions|object|默认配置项|


#### 实例方法
|方法|参数说明|方法说明|
|-|-|-|
|void `open`()||打开弹窗（将元素插入到 document 中）|
|void `close`()||关闭弹窗（将元素从 document 中移除）|
|void `show`()||显示弹窗|
|void `hide`()||隐藏弹窗|
|void `openSubPopup`(object *options*)|配置项（同构造函数的参数）|新开一个子弹窗|
|void `closeSubPopup`()||关闭当前子弹窗|

#### 实例属性
|属性|类型|说明|
|-|-|-|
|options|object|实例的配置项|
|element|jQuery|弹窗元素的jQuery对象|

---
_Source: https://npm.io/package/side-popup · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._