属性


设置

创建showDialog对象时传入相应配置。

  1. showDialog = new ShowDialog({
  2. title: '标题',
  3. width: 500,
  4. content: '#resetPwd'
  5. //...
  6. });

属性表

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。

  1. showDialog = new ShowDialog({
  2. content: '#el'
  3. });
  • 字符串写法:会在模态框里创建文本元素。
    1. showDialog = new ShowDialog({
    2. content: '一些字符'
    3. });
  • url写法:如果isIframe为true,那么content属性则为iframe的url,也可以在reloadUrl方法里指定url。
    1. showDialog = new ShowDialog({
    2. content: 'url'
    3. });

isIframe 属性介绍: {#isIframe}

  1. showDialog = new ShowDialog({
  2. isIframe: true
  3. });

指定isIframe为true,会创建一个iframe元素到模态框里:

  1. <iframe id="{showDialogId}" name="modalFrame" src="" frameborder="0" width="100%" height="100%"></iframe>

已自动设置iframe的样式、加载、尺寸、加载动画。

buttons 属性介绍: {#buttons}

  1. showDialog = new ShowDialog({
  2. buttons: [{
  3. text: '保存',
  4. event: function() {
  5. //...
  6. },
  7. btnStyle: 'btn-success'}]
  8. });

buttons是指定模态框底部的按钮组。
如果hasDefaultBtn为false,则没有默认的取消按钮:

  1. var button = {
  2. text: '取消',
  3. event: function () {
  4. kungeekui.$modalDom.modal('hide');
  5. },
  6. btnStyle: 'btn-default'
  7. }

如果hasDefaultBtn为true,则会在指定的buttons上堆加取消按钮。

button对象属性:
属性名 类型 默认值 备注
text String ‘’ 按钮文字
event Function null 按钮事件
btnStyle String ‘btn-default’ 按钮样式