jQuery EasyUI Window - Creating a Dialog
A Dialog is a special type of window that can include a toolbar at the top and buttons at the bottom. By default, a Dialog cannot be resized, but users can set the resizable property to true to enable resizing.
Creating a Dialog
A Dialog is very simple; it can be created from a DIV tag, as shown below:
<div id="dd" class="easyui-dialog" style="padding:5px;width:400px;height:200px;"
title="My Dialog" iconCls="icon-ok"
toolbar="#dlg-toolbar" buttons="#dlg-buttons">
Dialog Content.
</div>
Preparing the Toolbar and Buttons
<div id="dlg-toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:alert('Ok')">Ok</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Cancel</a>
</div>
The above code creates a Dialog with a toolbar and buttons. This is the standard configuration for a Dialog, including the toolbar, content, and buttons.