有关于easyui中dialog关闭的问题_easyui关闭dialog-优快云博客

有关于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");
		});
		
	})

页面效果: