属性
设置
创建showDialog对象时传入相应配置。
showDialog = new ShowDialog({
title: '标题',
width: 500,
content: '#resetPwd'
//...
});
属性表
table 表格属性:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
width | String,Number | ‘90%’ | 模态框宽度 |
height | String,Number | ‘’ | 模态框高度 |
title | String | ‘’ | 模态框标题 |
content | String | ‘’ | 模态框内容 详情 |
isIframe | Boolean | false | 是否Iframe模态框 详情 |
slideInRight | Boolean | false | 是否从右边滑出 |
buttons | Array | [{‘取消按钮’}] | 模态框底部按钮 详情 |
extraStyle | Object | {} | 额外css样式 |
hasDefaultBtn | Boolean | true | 是否有默认取消按钮 |
animated | String | ‘fadeInDown’ | 模态框弹出动画 |
animatedOut | String | ‘fadeOutUp’ | 模态框关闭动画 |
content 属性介绍: {#content}
- 选择器写法:在第一次show事件执行时,会把$(‘#el’)元素移动到模态框里。
注意元素移动时会有短暂的时间会选择不到,第一次时应该是对元素的操作完成之后再调用show。
showDialog = new ShowDialog({
content: '#el'
});
- 字符串写法:会在模态框里创建文本元素。
showDialog = new ShowDialog({
content: '一些字符'
});
- url写法:如果isIframe为true,那么content属性则为iframe的url,也可以在reloadUrl方法里指定url。
showDialog = new ShowDialog({
content: 'url'
});
isIframe 属性介绍: {#isIframe}
showDialog = new ShowDialog({
isIframe: true
});
指定isIframe为true,会创建一个iframe元素到模态框里:
<iframe id="{showDialogId}" name="modalFrame" src="" frameborder="0" width="100%" height="100%"></iframe>
已自动设置iframe的样式、加载、尺寸、加载动画。
buttons 属性介绍: {#buttons}
showDialog = new ShowDialog({
buttons: [{
text: '保存',
event: function() {
//...
},
btnStyle: 'btn-success'}]
});
buttons是指定模态框底部的按钮组。
如果hasDefaultBtn为false,则没有默认的取消按钮:
var button = {
text: '取消',
event: function () {
kungeekui.$modalDom.modal('hide');
},
btnStyle: 'btn-default'
}
如果hasDefaultBtn为true,则会在指定的buttons上堆加取消按钮。
button对象属性:
属性名 | 类型 | 默认值 | 备注 |
---|---|---|---|
text | String | ‘’ | 按钮文字 |
event | Function | null | 按钮事件 |
btnStyle | String | ‘btn-default’ | 按钮样式 |