easyui关闭打开的dialog

本文介绍了 EasyUI 中 dialog 的两种关闭方式:使用 'close' 和 'destroy' 方法的区别。指出 'close' 仅隐藏对话框,可能导致后续操作异常;而 'destroy' 则完全销毁对话框,适用于新增或修改场景。

easyui关闭dialog的方式:

$('#keywordShowDiv').dialog('destroy');

$('#keywordShowDiv').dialog('close');-------这种方式只是将dialog隐藏了,如果是在新增或者修改的dialog用此种方式关闭后,再次打开dialog将使得打开的dialog混乱,甚至出现js错误;

通常在新增或修改的dialog里面,关闭事件都使用destroy的方式;

<div id="keywordMDiv"></div>
<div id="keywordShowDiv"></div>
关闭事件:

var mDiv="<div id='keywordShowDiv'></div>";
$('#keywordShowDiv').dialog('destroy');
if($('#keywordShowDiv').length==0){
$('#keywordMDiv').after(mDiv);
}






                
EasyUI 提供了多种方式用于关闭 `dialog` 弹框,开发者可以根据实际需求选择不同的关闭方法,以确保弹框在关闭后不会残留或影响后续操作。 ### 使用 `.dialog('close')` 关闭弹框 该方法仅隐藏弹框,并不会从 DOM 中移除,适用于需要频繁打开关闭的场景。如果希望在关闭时执行某些操作,可以在 `onClose` 回调中处理。 ```javascript $('#dlg').dialog('close'); ``` 在配置中使用 `onClose` 回调: ```javascript $('#dlg').dialog({ onClose: function() { alert('对话框已关闭'); } }); ``` ### 使用 `.dialog('destroy')` 销毁弹框 此方法会将弹框从 DOM 中完全移除,适用于需要重新加载弹框内容或避免缓存问题的场景。如果希望每次打开弹框时都重新加载内容,建议使用此方法关闭弹框[^2]。 ```javascript $('#dlg').dialog('destroy'); ``` 结合 `onClose` 使用销毁方法: ```javascript $('#dlg').dialog({ onClose: function() { $(this).dialog('destroy'); // 关闭时销毁弹框 } }); ``` ### 通过配置 `closable` 属性控制是否允许关闭 如果希望禁用关闭按钮,可以通过设置 `closable: false` 来实现,此时用户无法通过点击右上角的关闭按钮关闭弹框,只能通过代码控制关闭[^3]。 ```javascript $('#dlg').dialog({ closable: false }); ``` ### 在按钮事件中手动关闭或销毁弹框 如果弹框中包含“取消”或“关闭”按钮,可以在按钮的 `handler` 中手动调用关闭或销毁方法: ```javascript buttons: [{ text: '关闭', handler: function() { $('#dlg').dialog('destroy'); // 或者使用 .dialog('close') } }] ``` ### 隐藏验证提示信息 在关闭弹框时,如果存在 EasyUI 的 `validatebox` 验证提示信息仍显示在页面上,可以通过隐藏 `.tooltip` 或 `.validatebox-tip` 元素来清除提示: ```javascript $('#dlg').dialog({ onClose: function() { $('.tooltip').hide(); // 隐藏提示框 $('.validatebox-tip').hide(); } }); ``` ### 总结 EasyUI 提供了多种关闭和销毁弹框的方式,开发者可以根据业务需求选择合适的方法。若需频繁打开弹框,建议使用 `.dialog('close')`;若需避免缓存问题,建议使用 `.dialog('destroy')`;同时,可以通过配置项控制弹框的可关闭性,并在按钮事件中手动控制关闭逻辑[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值