有关于easyui中dialog关闭的问题
引:
easyui中的dialog弹出框关闭要分两种情况:
- 仅仅只是弹出给用户查看的情况,比如预览操作;
此时退出就直接关闭即可; - 弹出给用户操作其会改动数据的弹出框;
此时,就要设置一个提示框,提醒用户是否关闭,否则一旦是用户误操作,不小心将为保存的数据直接关掉,这对用户体验度有很大的影响;
html:
<a href="javascript:void(0)" class="easyui-linkbutton" id="myDlg-openBtn">弹出弹出框</a>
<div id="myDlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" id="myDlg-saveBtn">确定</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" id="myDlg-closeBtn">取消</a>
</div>
<div id="myDlg" class="easyui-dialog" title="测试dialog" style="width: 800px; height: 600px; padding: 5px">
</div>js:
$(function(){
//设置一个全局变量来控制弹出框关闭
var bClose=false;
//弹出框的属性设置
$("#myDlg").dialog({
modal: true,
closable: true,
closed: true,
buttons: '#myDlg-buttons',
onBeforeClose:function(){//关闭弹出框之前动作-弹出提示
if (!bClose) {
$.messager.confirm("提醒", "确定关闭该窗口?",function (r) {
if (r) {
bClose = true;//标记可以退出
$("#myDlg").dialog("close");
}
});
}
return bClose; //通过全局变量来控制是否关闭窗口
}
});
//弹出框打开
$('#myDlg-openBtn').click(function(){
//先设置为false;
bClose=false;
$('#myDlg').dialog("open");
});
//点击保存,假定保存成功
$('#myDlg-saveBtn').click(function(){
$.messager.alert("提示信息","操作成功!","info");
//这里在后面加true,将会绕过onBeforeClose事件,弹出框直接关闭
$('#myDlg').dialog("close",true);
});
//点击关闭
$('#myDlg-closeBtn').click(function(){
$('#myDlg').dialog("close");
});
})
页面效果:
