侧边弹窗  

侧边弹窗组件，基于 Bootstrap v3 的模态框

安装

1. 使用NPM：npm install -S side-popup
2. 直接下载：压缩版

示例

用法 1

<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

import SidePopup from 'side-popup';

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

构造函数

|参数|类型|说明| |-|-|-| |options|object|弹窗配置项|

配置项说明

|名称|类型|默认值|说明| |-|-|-|-| |type|string|"right"|选择左右弹窗，可选："left"、"right"（子弹窗不适用）| |backdrop|boolean|false|点击背景关闭弹窗（子弹窗不适用）| |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[]|[{  html: '确定',  attrs: {    class: 'btn btn-primary',    type: 'button'  }}]|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对象|