最近在做项目新需求时,发现easyUI中弹窗不能完全关闭问题,一直没找到问题,最后才明白原来EasyUI中的弹窗的分内层和外层。在使用最外层弹框modalDialog时,一个页面只能使用一个,如果存在两个modalDialog弹窗会导致其中一个在提交的时候报错。
因为系统不知道具体要关掉的哪个弹窗。但是需求中有需要两个弹窗怎么办?
我在项目中使用了一个modalDialog最外层弹窗,接着又创建了一个空div,最为第二层的弹窗dialog的存放容器。但是和最外层弹窗和第二层弹窗dialog的写法有所不同。具体代码如下。第一个是最外侧modalDialog弹窗
$.modalDialog({
title : "修改评估组",
width : 600,
height : 400,
href : "zznueg/manage/evalgroup/evalGroupEditDlg",
onLoad : function() {
var f = $.modalDialog.handler.find("#form");
f.form("load", row);
},
buttons : [ {
text : '修改',
iconCls : 'icon-yes',
handler : function() {
$.modalDialog.openner = $grid;
var f = $.modalDialog.handler.find("#form");
f.submit();
}
}, {
text : '取消',
iconCls : 'icon-no',
handler : function() {
$.modalDialog.handler.dialog('destroy');
$.modalDialog.handler = undefined;
}
} ]
});
第二个是先创建一个空的div作为弹窗的容器
<div id="AddGroupTeacherMemo"></div>
然后再创建一个dialog弹窗
$("#orderdata").dialog({
title: "出库订单",
width: '',
height: ,
resizable: false,
href: "",
onLoad: function () {
},
onLoadError: function (xmlHttpRequest, textStatus, errorThrown) {
},
buttons: [{
text: '确认选择',
iconCls: 'icon-ok',
handler: function () {
}
}
}, {
text: '取消',
iconCls: 'icon-cancel',
handler: function () {
$("#orderdata").dialog('close');
}
}
]
});
这样在一个页面创建两个弹窗就不会出现在打开一个后在打开一个弹窗关闭不掉的情况。