easyui dialog 隐藏

最新推荐文章于 2025-10-05 13:16:32 发布

原创最新推荐文章于 2025-10-05 13:16:32 发布 · 7.8k 阅读

2 ·

CC 4.0 BY-SA版权

EasyUI 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种在EasyUI中实现对话框默认隐藏的方法，并通过一个具体的示例展示了如何使用closed:true属性来达到这一效果。此外，还提供了一个用于显示对话框的JavaScript函数。

官网上的代码里没有写隐藏dialog的方法，其实可以直接设置 closed:true

官网上的例子修改，一开始不显示dialog

<div id="dlg" class="easyui-dialog" title="Complex Toolbar on Dialog" style="width:400px;height:200px;padding:10px"
             data-options="iconCls: 'icon-save' ,toolbar:'#dlg-toolbar',buttons:'#dlg-buttons',closed:true">
            The dialog content.
        </div>
        <div id="dlg-toolbar" style="padding:2px 0">
            <table cellpadding="0" cellspacing="0" style="width:100%">
                <tr>
                    <td style="padding-left:2px">
                        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">Edit</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">Help</a>
                    </td>
                    <td style="text-align:right;padding-right:2px">
                        <input class="easyui-searchbox" data-options="prompt:'Please input somthing'" style="width:150px"/>
                    </td>
                </tr>
            </table>
        </div>
        <div id="dlg-buttons">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:alert('save')">Save</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">Close</a>
        </div>

点击按钮触发事件显示：

function append() {
    $('#dlg').dialog('open');
}