对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

基本用法

Modal 弹出一个对话框，适合需要定制性的更大的场景。

这是一段信息

<div id="modal1">
	这是一段信息
</div>
<button class="woui-btn woui-btn-red" onclick="open1()">打开弹窗</button>
<button class="woui-btn woui-btn-red" onclick="setHeader1()">改变标题</button>
<button class="woui-btn woui-btn-red" onclick="setContent()">改变内容(String)</button>
<button class="woui-btn woui-btn-red" onclick="setContent2()">改变内容(Nodes)</button>

var modal = new woUI.Modal({
  id: '#modal1',
  visible: false,
  size: 'small',
  title: '这是一个标题',
  dimmer: true,
  dimmerClosable: true,
  closable: false,
  escapeClosable: true,
  onCancel: function() {
    modal.close()
  },
  onOk: function() {
    modal.close()
  }
});
function open1() {
  modal.open();
}
function setHeader1() {
  modal.setHeader("这是新的标题");
  modal.open();
}
function setContent() {
  modal.setContent('这是新的内容');
  modal.open();
}
function setContent2() {
  var array = [];
  var h1 = document.createElement('h1');
  h1.innerHTML = '新的内容';
  array.push(h1);
  modal.setContent(array);
  modal.open();
}

自定义内容

Modal 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。

一套用于web端产品设计开发的基础组件库，方便UI设计师和前端工程师快速搭建网站。

<div id="modal2">
  <h1>测试一下</h1>
  <button class="woui-btn woui-btn-red">点一下</button>
</div>
<button class="woui-btn woui-btn-red" onclick="open2()">打开弹窗</button>

var modal2 = new woUI.Modal({
  id: '#modal2',
  visible: false,
  title: '信息标题',
  dimmerclosable: true,
  size: 'mini',
  onCancel: function() {
    modal2.close()
  },
  onOk: function() {
    modal2.close()
  }
})
function open2() {
  modal2.open();
}

居中布局

标题和底部可水平居中。

<div id="modal3">
  <button class="woui-btn woui-btn-red">点一下</button>
</div>
<button class="woui-btn woui-btn-red" onclick="open3()">打开弹窗</button>

var modal3 = new woUI.Modal({
  id: '#modal3',
  visible: false,
  title: '标题可以居中',
  center: true,
  onCancel: function() {
    modal3.close()
  },
  onOk: function() {
    modal3.close()
  }
})
function open3() {
  modal3.open();
}

Options 参数

参数	说明	类型	可选值	默认值
id	绑定元素id (需支持queryselector)	string	-	`null`
visible	是否显示Modal	boolean	-	`false`
title	标题	string	-	-
size	尺寸	string	-/mini/small/large/	-
dimmer	是否显示遮罩层	boolean	-	`true`
dimmerClosable	遮罩层是否可以关闭	boolean	-	`true`
closable	Modal是否显示关闭按钮	boolean	-	`true`
customClass	自定义类名	string	-	-
escapeClosable	是否支持ESC键关闭	boolean	-	`false`
footer	是否显示底部按钮组	boolean	-	`true`
onOk	点击底部ok按钮回调函数	function	-	-
onCancel	点击底部cancel按钮回调函数	function	-	-
okText	底部ok按钮显示文字	string	-	`确定`
cancelText	底部cancel按钮显示文字	string	-	`取消`
onOpen	打开Modal回调函数	function	-	-
onClose	关闭Modal回调函数	function	-	-
zIndex	Modal的Z-index	number	-	`null`
center	是否对头部和底部采用居中布局	boolean	-	false

对话框 API

初始化

new woUI.Modal(option)

option: option参数参见表格。

打开对话框

Modal.prototype.open(callback)

callback: 可向方法内输送回调函数, 在动作结束后回调使用, 传入的callback必须是一个function

1	modal.open();

关闭对话框

Modal.prototype.close(callback)

callback: 可向方法内输送回调函数, 在动作结束后回调使用, 传入的callback必须是一个function

1	modal.close();

设置对话框标题

Modal.prototype.setHeader(text, callback)

text: 对话框标题内容文字
callback: 可向方法内输送回调函数, 在动作结束后回调使用, 传入的callback必须是一个function

1	modal.setHeader('这是一个标题', callback);

设置对话框内容

Modal.prototype.setContent(content, callback)

content : 对话框内容(可以为string或者nodes)
callback: 可向方法内输送回调函数, 在动作结束后回调使用, 传入的callback必须是一个function

1	modal.setContent('这是一个标题', callback);

对话框