有关于easyui中dialog关闭的问题

来源:互联网 发布:怎么开淘宝福利群 编辑:程序博客网 时间:2024/06/03 17:17

有关于easyui中dialog关闭的问题

引:

easyui中的dialog弹出框关闭要分两种情况:
  1. 仅仅只是弹出给用户查看的情况,比如预览操作;
    此时退出就直接关闭即可;
  2. 弹出给用户操作其会改动数据的弹出框;
    此时,就要设置一个提示框,提醒用户是否关闭,否则一旦是用户误操作,不小心将为保存的数据直接关掉,这对用户体验度有很大的影响;
在这里我记录着对第二种方式的处理;


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


页面效果:






原创粉丝点击