eros项目组件之弹窗组件

[weixin_46711038]

弹窗功能

弹框的功能不管是在传统开发中还是如今比较流行的前后端分离开发中都是比较常见的功能，如：添加、编辑、确认框提示等等(当前页可以直接打开新页面)， 为了解决这个问题，我们封装了弹框组件，根据使用场景的不同，框架做了继承开发，调用时只需要传入相应的参数即可。

函数主体：

open: function (title, url, width, height, callback) {
	//如果是移动端，就使用自适应大小弹窗
	if ($.common.isMobile()) {
		width = 'auto';
		height = 'auto';
	}
	if ($.common.isEmpty(title)) {
		title = false;
	}
	if ($.common.isEmpty(url)) {
		url = "/404.html";
	}
	if ($.common.isEmpty(width)) {
		width = 800;
	}
	if ($.common.isEmpty(height)) {
		height = ($(window).height() - 50);
	}
	if ($.common.isEmpty(callback)) {
		callback = function(index, layero) {
			var iframeWin = layero.find('iframe')[0];
			iframeWin.contentWindow.submitHandler(index, layero);
		}
	}
	layer.open({
		type: 2,
		area: [width + 'px', height + 'px'],
		fix: false,
		//不固定
		maxmin: true,
		shade: 0.3,
		title: title,
		content: url,
		btn: ['确定', '关闭'],
		// 弹层外区域关闭
		shadeClose: true,
		yes: callback,
		cancel: function(index) {
			return true;
		}
	});
},

参数说明：

• title 弹窗标题，这个标题是在弹框的左上角显示的标题文字
• url URL地址，这个是弹框调用的方法地址，比如添加、编辑时需要调用页面表单地址的方法
• width 弹窗宽度，一个数值(不传时默认弹窗自适应显示)
• height 弹窗高度，一个数值(不传时默认弹窗自适应显示)
• callback 回调函数，弹窗成功弹出之后会默认进行回调

调用方式：

// 普通调用
$.modal.open("标题内容", url);

// 设置宽高
$.modal.open("标题内容", url, '770', '380');

// 设置回调函数
$.modal.open("标题内容", url, '770', '380', function(index, layero) {
	// 获取弹窗参数（方式一）
	var body = layer.getChildFrame('body', index);
	console.log(body.find('#id').val());
	// 获取弹窗参数（方式二）
    console.log($(layero).find("iframe")[0].contentWindow.document.getElementById("id").value);
});