对话框

对话框组件。

FEA 对话框组件基于 ArtDialog 对话框,查看详细文档

显示

要使用这个组件,只需要添加 data-dialog="{target: #ID}" 属性到一个元素中。默认情况下,目标元素会被隐藏。

示例

链接显示
欢迎使用 FEA!

代码

<button class="btn" data-dialog="{target:'dialog'}">按钮显示</button>
<a href="#dialog" data-dialog>链接显示</a>
<div id="dialog" class="panel panel-box">欢迎使用 FEA!</div>

FEA.Dialog 快速参考

普通对话框

var d = $.FEA.dialog({
	title: '欢迎',
	content: '欢迎使用 FEA.dialog 对话框组件!'
});
d.show();

模态对话框

var d = $.FEA.dialog({
	title: 'message',
	content: '<input autofocus class="control-input"/>'
});
d.showModal();

气泡浮层

var d = $.FEA.dialog({
	content: 'Hello World!',
	quickClose: true// 点击空白处快速关闭
});
d.show(document.getElementById('quickref-bubble'));

添加按钮

1.确定与取消按钮:

var d = $.FEA.dialog({
	title: '提示',
	content: '按钮回调函数返回 false 则不许关闭',
	okValue: '确定',
	ok: function () {
		this.title('提交中…');
		return false;
	},
	cancelValue: '取消',
	cancel: function () {}
});
d.show();

2.指定更多按钮:

请参考 button 方法或参数。

控制对话框关闭

var d = $.FEA.dialog({
	content: '对话框将在两秒内关闭',
	time: 2
});
d.show();

给对话框左下脚添加复选框

var d = $.FEA.dialog({
	title: '欢迎',
	content: '欢迎使用 FEA.dialog 对话框组件!',
	ok: function () {},
	statusbar: '<label><input type="checkbox"> 不再提醒</label>'
});
d.show();

点按钮不关闭对话框

按钮事件返回 false 则不会触发关闭。

var d = $.FEA.dialog({
	title: '欢迎',
	content: '欢迎使用 FEA.dialog 对话框组件!',
	ok: function () {
		var that = this;
		this.title('正在提交..');
		setTimeout(function () {
			that.close().remove();
		}, 2000);
		return false;
	},
	cancel: function () {
		alert('不许关闭');
		return false;
	}
});
d.show();

不显示关闭按钮

var d = $.FEA.dialog({
	title: '欢迎',
	content: '欢迎使用 FEA.dialog 对话框组件!',
	cancel: false,
	ok: function () {}
});
d.show();