弹出层

使用模块

下载 弹出层组件作为依赖项引入到模块中，并创建实例。

选项参数

# content

功能：弹出层内容

类型：{String}

类型：{Object} DOM或者jQuery对象，自动获取元素内容

默认：''

# template

功能：弹出层内容模版，配合data参数使用，优先级高于content

类型：{String}

类型：{Object} 必须包含main属性作为主模版

默认：''

# data

功能：弹出层模版数据

类型：{Object}

默认：{}

# events

功能：绑定事件，用法参考代理事件

类型：{Object}

默认：null

# className

功能：弹出层最外层元素添加类名，多个时空格分隔

类型：{String}

默认：''

# width

功能：宽度，可以设置为auto或者100%

类型：{String, Number}

默认：320

# height

功能：高度，可以设置为auto或者100%

类型：{String, Number}

默认：'auto'

# maxWidth

功能：最大宽度

类型：{Number}

默认：0

# maxHeight

功能：最大高度

类型：{Number}

默认：0

# zIndex

功能：弹出层层级

类型：{Number}

默认值：null

# id

功能：标识符名称，弹出层最外层元素会增加layer-标识符名称的类名

类型：{String}

默认：''

# skin

功能：皮肤名称，弹出层最外层元素会增加nui-layer-皮肤名称的类名

类型：{String}

默认：''

# timer

功能：自动关闭倒计时毫秒时间

类型：{Number}

默认：0

# edge

功能：距离容器四周边缘距离

类型：{Number}

默认：0

# container

功能：显示容器

类型：{String, OBject} 选择器、DOM、jQuery对象

默认：'body'

# title

功能：头部标题，隐藏标题设置为null

类型：{String}

默认：'温馨提示'

# isMove

功能：是否可以拖动

类型：{Boolean}

默认：false

# isInnerMove

功能：是否只能在不超过容器边缘的区域内拖动

类型：{Boolean}

默认：false

# isMask

功能：是否显示背景遮罩

类型：{Boolean}

默认：true

# isClickMask

功能：是否点击背景遮罩关闭弹出层

类型：{Boolean}

默认：false

# isMoveMask

功能：是否在拖动弹出层时，显示一个与弹出层同等大小的背景遮罩随鼠标移动

类型：{Boolean}

默认：false

# isHide

功能：是否能使用hide方法关闭

类型：{Boolean}

默认：false

# isCenter

功能：是否垂直水平居中显示

类型：{Boolean}

默认：true

# isFull

功能：是否全屏显示

类型：{Boolean}

默认：false

# isTop

功能：是否置顶显示

类型：{Boolean}

默认：false

# isTips

功能：是否以贴士形式展示，无标题与底部按钮

类型：{Boolean}

默认：false

# isFixed

功能：是否拖动容器滚动条时弹出层固定所在位置

类型：{Boolean}

默认：true

# scrollbar

功能：当内容超出时，是否显示滚动条，如果设置为false并且内容区域超出了maxHeight，也会有滚动条

类型：{Boolean}

默认：true

# align

功能：底部按钮对齐方式

类型：{String} left / center / right

默认：'center'

# bubble

功能：是否以气泡形式显示，弹出层边缘会多出箭头

类型：{Object}

属性：enable {Boolean} false 是否启用

属性：dir {String} 'top' 箭头方向 top / right / bottom / left

# iframe

功能：加载iframe内容，不建议跨域使用

类型：{Object}

属性：enable {Boolean} false 是否启用

属性：cache {Boolean} false 是否缓存页面

属性：src {String} '' 请求地址

# close

功能：头部关闭按钮

类型：{Object}

属性：enable {Boolean} true 是否启用

属性：text {String} 'X' 按钮内容

# confirm

功能：底部确认按钮

类型：{Object}

属性：enable {Boolean} false 是否启用

属性：text {String} '确定' 按钮内容

属性：name {String} 'normal' 设置按钮类型名称，具体参考按钮元素

属性：callback {Function} function(){return true} 触发回调，返回值为true时才能关闭弹出层

# cancel

功能：底部取消按钮

类型：{Object}

属性：enable {Boolean} true 是否启用

属性：text {String} '取消' 按钮内容

属性：callback {Function} undefined 触发回调，若返回值是false，则无法关闭弹出层

# button

功能：设置底部自定义按钮

类型：{Array Object}

默认：null

属性：id {String} 按钮id，若取名为cancel / confirm / cancel会覆盖内置这三个按钮的配置属性

属性：text {String} 按钮内容

属性：name {String} 设置按钮类型名称，当值设置为disabled时，表示按钮被禁用，无法触发回调，具体参考按钮元素

属性：style {Object} 设置按钮行内样式

属性：callback {Function} 触发回调，若返回值是false，则无法关闭弹出层，若id是confirm，返回值必须是true才能关闭

# position

功能：弹出层定位

类型：{Object}

属性：top {Number, String} 0 距离容器顶部距离

属性：right {Number, String} 0 距离容器右侧距离

属性：bottom {Number, String} 0 距离容器底部距离

属性：left {Number, String} 0 距离容器左侧距离

说明：top/bottom或者left/right不可同时设置，只能设置top/left、top/right...以此类推。属性值中可使用运算符计算距离，其中self表示定位方向弹窗大小，例如top中的self表示弹出层自身高度，left中的self表示弹出层自身宽度。

# under

功能：将一个或者多个弹出层置于背景遮罩底部

类型：{Array, Object} 参数值只能是layer实例或者layer实例的集合，在当前弹出层关闭时，被置于底部的弹出层会恢复原来的层级状态

默认：null

# onInit

功能：弹出层初始化时回调函数

类型：{Function}

参数：self {Object} 当前layer实例

# onHideBefore

功能：关闭前回调函数

类型：{Function}

参数：self {Object} 当前layer实例

说明：弹出层调用hide方法被销毁之前回调，若返回false，则不能销毁该弹出层。

# onDestroy

功能：弹出层关闭销毁时回调函数。

类型：{Function}

参数：self {Object} 当前layer实例

# onDestroyBefore

功能：弹出层在销毁之前回调，若返回false，则不能销毁该弹出层。

类型：{Function}

参数：self {Object} 当前layer实例

# onMove

功能：拖动弹出层重新定位时回调函数，isMove为true时才会触发。

类型：{Function}

参数：self {Object} 当前layer实例

# onResize

功能：窗口改变大小，使弹出层位置发生变化时回调，在设置position或者isCenter为true时才会触发。

类型：{Function}

参数：self {Object} 当前layer实例

# onReset

功能：重置实例为初始化状态时回调。

类型：{Function}

参数：self {Object} 当前layer实例

# onScroll

功能：容器滚动时触发回调。

类型：{Function}

参数：self {Object} 当前layer实例

参数：event {Event Object} 事件对象

参数：elem {jQuery Object} 滚动元素jQuery对象

参数：data {Object} 滚动数据，包含top以及left

# onTimer

功能：定时关闭弹出时触发回调，选项参数timer大于0时才会启用。

类型：{Function}

参数：self {Object} 当前layer实例

参数：time {Number} 定时毫秒数

实例属性

# element

功能：对应类名为nui-layer元素

类型：{jQuery Object}

# head

功能：对应类名为layer-head元素

类型：{jQuery Object}

# main

功能：对应类名为layer-main元素

类型：{jQuery Object}

# foot

功能：对应类名为layer-foot元素

类型：{jQuery Object}

# data

功能：弹出层自身属性

类型：{Object}

属性：width {Number} 自身宽度，不包含边框边距

属性：height {Number} 自身高度，不包含边框边距

属性：outerWidth {Number} 自身完整宽度

属性：outerHeight {Number} 自身完整高度

属性：top {Number} 距离容器顶部距离，包括垂直滚动距离

属性：left {Number} 距离容器左侧距离，包括水平滚动距离

属性：offsetTop {Number} 距离容器顶部距离

属性：offsetLeft {Number} 距离容器左侧距离

实例方法

# resize

功能：改变实例大小位置为正常状态

类型：{Function}

# hide

功能：销毁实例，当实例选项参数中的isHide为false，则无法销毁

类型：{Function}

类方法

# resize

功能：改变实例大小位置为正常状态，不传id则对所有实例操作

类型：{Function}

参数：id {Number, String} 实例id或者选项参数id

# hide

功能：销毁实例，当实例选项参数中的isHide为false，则无法销毁，不传id则对所有实例操作

类型：{Function}

参数：id {Number, String} 实例id或者选项参数id